SEO：自動圖片優化 | Next.js

使用常規 HTML 時，我們這樣添加 Hero 圖片：

<img src="large-image.jpg" alt="Large Image" />

然而，這意味著我們需要手動優化以下幾點：

Next.js 提供了一個 Image 組件，可以為我們開箱即用地處理這些優化。

next/image 是 HTML img 元素的擴展，專為現代網路進化而來。

這意味著調整大小、優化圖片以及提供現代格式（如 WebP，當瀏覽器支援時）都可以使用 next/image 自動完成。

該組件避免向較小視窗的設備發送大圖片，並允許 Next.js 採用未來的圖片格式，並將這些圖片提供給支援它們的瀏覽器。

自動圖片優化適用於任何圖片來源。即使圖片由外部數據源（如 CMS）託管，仍然可以進行優化。

Next.js 不是在構建時優化圖片，而是在用戶請求時按需優化圖片。與靜態網站生成器和僅靜態解決方案不同，無論是發送十張圖片還是一千萬張圖片，構建時間都不會增加。

圖片預設為延遲載入。位於視窗外的圖片不會影響頁面速度。圖片僅在進入視窗時才載入。

圖片總是會被渲染，以避免累積版面偏移 (CLS)。

讓我們使用 next/image 來更新應用程式以顯示我們的 Hero 圖片。高度 (height) 和寬度 (width) 屬性應該是所需的渲染尺寸，與原始圖片的長寬比相同。

打開 pages/index.js 文件，並在文件開頭添加從 next/image 導入的 Image：

import Image from 'next/image';

然後，將 Hero 的 img 替換為 Image 組件：

// 替換前
<img src="large-image.jpg" alt="Large Image" />
 
// 替換後
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

頁腳中也有一張圖片。讓我們也替換它：

// 替換前
<img src="/vercel.svg" alt="Vercel Logo" />
 
// 替換後
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

最後，在 Chrome DevTools 中再次運行 Lighthouse 報告並比較結果。

自動圖片優化