Next.js Image 組件的核心功能

Next.js 的 Image 組件（next/image）在背後做了幾件常見圖片優化需要手動處理的事情：

自動轉換為現代格式（WebP 或 AVIF）：WebP 通常比 JPEG 小 25–35%，AVIF 更小但瀏覽器支援稍差，Next.js 根據瀏覽器支援自動選擇最佳格式。

按需調整尺寸：Image 組件根據指定的 width / height 屬性生成適合的圖片尺寸，避免載入比需要更大的圖片。

延遲載入（Lazy Loading）：預設情況下，不在視窗內的圖片不會立即載入，只有滾動到附近才開始載入，大幅減少初始頁面載入量。

防止版面偏移（CLS）：通過提前佔位（基於 width/height 的高寬比），避免圖片載入後造成頁面內容突然位移。

基本使用

最常見的使用方式是指定 width 和 height，這讓 Next.js 知道圖片的長寬比，用於預先佔位：

範例：

import Image from 'next/image'

src="/images/hero-banner.jpg"

alt="SimpleCreative 品牌官網設計"

width={1200}

height={630}

className="w-full h-auto"

/>

注意：width 和 height 是原始圖片的寬高（用於計算長寬比），不是在頁面上顯示的大小。顯示大小由 CSS（className）控制。

fill 模式

當你不知道圖片的精確寬高，或者想讓圖片填滿容器，使用 fill 模式：

範例：

src={post.coverImage}

alt={post.title}

fill

className="object-cover"

/>

使用 fill 時：父容器必須是 position: relative（或 absolute/fixed）。object-cover 讓圖片按比例縮放填滿容器而不變形。

priority 屬性

對於首屏（above the fold）的圖片，添加 priority 屬性可以禁用懶加載並預載入圖片，改善 LCP（Largest Contentful Paint）分數：

範例：

src="/images/hero.jpg"

alt="Hero 圖片"

width={1920}

height={1080}

priority

/>

只把 priority 用在首屏可見的關鍵圖片上，過度使用 priority 會失去懶加載的好處。

sizes 屬性

sizes 屬性告訴 Next.js 在不同螢幕寬度下，圖片實際佔用的寬度，讓它生成合適的 srcset。

如果你的圖片佔 viewport 的 100% 寬度：

sizes="100vw"

如果圖片在大螢幕是 33%（三欄格子），小螢幕是 100%：

sizes="(max-width: 768px) 100vw, 33vw"

正確的 sizes 設定能讓瀏覽器下載最小必要尺寸的圖片，而不是下載大圖再縮放。

外部圖片的 domains 設定

如果圖片來自外部 URL（例如 CDN 或 CMS 的媒體庫），需要在 next.config.ts 中設定允許的 hostname：

以 remotePatterns 設定格式，指定 hostname（例如 images.unsplash.com 或你的 Supabase Storage domain）。

常見錯誤

忘記設定 alt 文字

alt 屬性是圖片的無障礙描述，也影響 SEO（Google 讀取 alt 文字來理解圖片內容）。每張圖片都要有描述性的、有意義的 alt 文字——不要留空或使用「圖片1」這樣無意義的描述。

使用太大的原始圖片

就算 Next.js 會優化，原始圖片也不要超過必要的大小。Hero 圖片用 2000px 寬的 JPEG 作為原始檔是合理的，但不需要 8000px 的 RAW 檔案的輸出品質。

建議：使用 Squoosh、ImageOptim 或類似工具，先把圖片壓縮到合理大小，再讓 Next.js 進一步優化。

所有圖片都加 priority

priority 應該只用在首屏關鍵圖片（通常是 Hero 區域的主圖）。過度使用 priority 讓所有圖片都立即載入，失去懶加載的效能好處。

placeholder 屬性

使用 placeholder="blur" 讓圖片在完全載入前顯示模糊版本的佔位符，避免突然的視覺跳躍：

對本地圖片（在 public/ 目錄中），Next.js 自動生成 blurDataURL。

對外部圖片，需要手動提供 blurDataURL（一個非常小的 base64 圖片 URI）。