圖片最佳化

根據 Web Almanac，圖片在典型網站的 頁面權重 中佔了很大一部分，並且可能對您網站的 LCP 效能 產生相當大的影響。

Next.js Image 元件擴展了 HTML <img> 元素，並具備自動圖片最佳化的功能

• 尺寸最佳化： 使用現代圖片格式 (如 WebP)，自動為每個裝置提供正確尺寸的圖片。
• 視覺穩定性： 在圖片載入時自動防止版面配置偏移。
• 更快的頁面載入速度： 圖片僅在使用原生瀏覽器延遲載入進入視窗時才會載入，並可選擇模糊化預留位置。
• 資產靈活性： 隨需調整圖片大小，即使是儲存在遠端伺服器上的圖片也是如此

🎥 觀看： 深入瞭解如何使用 next/image → YouTube (9 分鐘)。

用法

import Image from 'next/image'

然後您可以為圖片定義 src（本機或遠端）。

本機圖片

若要使用本機圖片，請 import 您的 .jpg、.png 或 .webp 圖片檔案。

Next.js 將自動判斷根據匯入的檔案，判斷圖片的內建 width 和 height。這些值用於判斷圖片比例，並防止圖片載入時發生累計版面配置偏移。

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

警告： 不支援動態 await import() 或 require()。 import 必須是靜態的，以便在建置時進行分析。

您可以選擇在 next.config.js 檔案中設定 localPatterns，以允許特定圖片並封鎖所有其他圖片。

module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

遠端圖片

若要使用遠端圖片，src 屬性應為 URL 字串。

由於 Next.js 在建置過程中無法存取遠端檔案，因此您需要手動提供 width、height 和選用的 blurDataURL 屬性。

width 和 height 屬性用於推斷圖片的正確長寬比，並避免圖片載入時發生版面配置偏移。width 和 height 並不決定圖片檔案的渲染大小。深入瞭解圖片尺寸調整。

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

為了安全地允許最佳化圖片，請在 next.config.js 中定義支援的 URL 模式清單。盡可能具體，以防止惡意使用。例如，以下設定僅允許來自特定 AWS S3 儲存貯體的圖片

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

深入瞭解 remotePatterns 設定。如果您想對圖片 src 使用相對 URL，請使用 loader。

網域

有時您可能想要最佳化遠端圖片，但仍使用內建的 Next.js Image Optimization API。若要執行此操作，請將 loader 保留為預設設定，並為 Image src 屬性輸入絕對 URL。

為了保護您的應用程式免受惡意使用者攻擊，您必須定義您打算與 next/image 元件搭配使用的遠端主機名稱清單。

深入瞭解 remotePatterns 設定。

載入器

請注意，在稍早的範例中，為本機圖片提供了部分 URL ("/me.png")。這是因為載入器架構。

載入器是一個函式，用於產生圖片的 URL。它會修改提供的 src，並產生多個 URL 以請求不同大小的圖片。這些多個 URL 用於自動 srcset 產生，以便向您網站的訪客提供適合其視窗大小的圖片。

Next.js 應用程式的預設載入器使用內建的 Image Optimization API，該 API 可最佳化來自網路上任何位置的圖片，然後直接從 Next.js Web 伺服器提供這些圖片。如果您想直接從 CDN 或圖片伺服器提供圖片，您可以使用幾行 JavaScript 程式碼編寫自己的載入器函式。

您可以使用 loader 屬性為每個圖片定義載入器，或使用 loaderFile 設定在應用程式層級定義載入器。

優先權

您應該將 priority 屬性新增至將作為每個頁面的最大內容繪製 (LCP) 元素的圖片。這樣做可讓 Next.js 預先載入 圖片，從而顯著提升 LCP。

LCP 元素通常是頁面視窗中可見的最大圖片或文字區塊。當您執行 next dev 時，如果 LCP 元素是沒有 priority 屬性的 <Image>，您會看到主控台警告。

一旦您識別出 LCP 圖片，您就可以像這樣新增屬性

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

請參閱next/image 元件文件，以瞭解關於優先權的更多資訊。

圖片尺寸調整

圖片最常損害效能的方式之一是透過版面配置偏移，即圖片在載入時會將頁面上的其他元素推開。這個效能問題對使用者來說非常惱人，以至於它有自己的 Core Web Vital，稱為累計版面配置偏移。避免圖片造成版面配置偏移的方法是始終調整圖片大小。這可讓瀏覽器在圖片載入之前，精確地為圖片保留足夠的空間。

由於 next/image 的設計旨在保證良好的效能結果，因此不能以會導致版面配置偏移的方式使用，並且必須以以下三種方式之一調整大小

1. 自動調整，使用靜態匯入
2. 手動調整，透過包含用於判斷圖片長寬比的 width 和 height 屬性。
3. 隱含調整，透過使用 fill，使圖片展開以填滿其父元素。

如果我不知道圖片的大小怎麼辦？

如果您從不知道圖片大小的來源存取圖片，您可以執行以下幾項操作

使用 fill

fill 屬性允許圖片由其父元素調整大小。考慮使用 CSS 為頁面上的圖片父元素提供空間，並使用 sizes 屬性來符合任何媒體查詢中斷點。您也可以將 object-fit 與 fill、contain 或 cover 搭配使用，並使用 object-position 來定義圖片應如何佔用該空間。

標準化您的圖片

如果您是從您控制的來源提供圖片，請考慮修改您的圖片管線，以將圖片標準化為特定大小。

修改您的 API 呼叫

如果您的應用程式使用 API 呼叫 (例如 CMS) 擷取圖片 URL，您或許可以修改 API 呼叫以傳回圖片尺寸以及 URL。

如果建議的調整圖片大小方法都無效，則 next/image 元件旨在與標準 <img> 元素在頁面上良好協同運作。

樣式

Image 元件的樣式設定與設定一般 <img> 元素樣式類似，但有幾項準則需要記住

• 使用 className 或 style，而非 styled-jsx。
  • 在大多數情況下，我們建議使用 className 屬性。這可以是匯入的 CSS 模組、全域樣式表等等。
  • 您也可以使用 style 屬性來指派內嵌樣式。
  • 您不能使用 styled-jsx，因為它的範圍限定於目前的元件 (除非您將樣式標記為 global)。
• 使用 fill 時，父元素必須具有 position: relative
  • 這是該版面配置模式中正確渲染圖片元素所必需的。
• 使用 fill 時，父元素必須具有 display: block
  • 這是 <div> 元素的預設值，但否則應指定。

範例

響應式

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // Importing an image will
        // automatically set the width and height
        src={mountains}
        sizes="100vw"
        // Make the image display full width
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

填滿容器

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* And more images in the grid... */}
    </div>
  )
}

背景圖片

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

如需搭配各種樣式使用的 Image 元件範例，請參閱 Image Component Demo。

其他屬性

檢視 next/image 元件可用的所有屬性。

設定

next/image 元件和 Next.js Image Optimization API 可以在 next.config.js 檔案中設定。這些設定可讓您啟用遠端圖片、定義自訂圖片中斷點、變更快取行為等等。

閱讀完整的圖片設定文件以瞭解更多資訊。