介紹

優化影像資源是提高 Lighthouse 分數和 LCP（最大內容繪製）等 Web 效能指標最有效的方法之一。

在許多 Web 應用程式中，圖像佔總負載大小的一半以上。緩慢的圖像載入時間直接降低了用戶體驗。

以 WebP 和 AVIF 等下一代格式取代 JPEG 和 PNG 等傳統格式已成為現代 Web 開發的標準做法。本文比較了這兩種格式，並解釋如何配置響應式、最佳化的影像傳輸。

1. 比較下一代格式：WebP 與 AVIF

與 JPEG 和 PNG 相比，下一代格式可以更有效地壓縮文件，同時保持視覺品質。

① 網頁版

WebP 由 Google 開發，是一種多功能圖像格式。

• 特點： 同時支援有損壓縮（替代JPEG）和無損壓縮（替代PNG）。它還支援 Alpha 通道透明度和動畫。
• **壓縮：**與同等質量的 JPEG 相比，檔案大小減少 25% 到 30%。
• 支援： 幾乎所有現代網頁瀏覽器都支援，使其成為網頁圖像的事實上的標準。

② AVIF

AVIF 是一種基於 AV1 視訊編解碼器的開放、免版稅的影像格式。

• 特點： 提供比 WebP 更高的壓縮比，並支援廣色域和 HDR。它在處理漸變和詳細的攝影影像時表現良好，最大限度地減少了壓縮偽影。
• **壓縮：**與同等 JPEG 相比，檔案大小減少 50% 或更多。
• 支援： Chrome、Firefox 和 Safari 等主流瀏覽器的支持，使其為生產環境做好準備。

2. 使用 HTML 元素進行後備交付

由於並非所有瀏覽器都支援 AVIF，因此建議的方法是提供後備鏈：如果支持，則提供 AVIF，秋季返回 WebP，並使用標準 JPEG 或 PNG 作為最終後備。

您可以使用 <picture> 元素 在 HTML 中直接設定此交付。

<picture>
  <!-- 1. Preferred: High-compression AVIF (served if the browser supports it) -->
  <source srcset="image.avif" type="image/avif">

  <!-- 2. Secondary: Widely supported WebP format -->
  <source srcset="image.webp" type="image/webp">

  <!-- 3. Final Fallback: Traditional JPEG for older browsers -->
  <img src="image.jpg" alt="Optimized showcase image" width="800" height="600" loading="lazy">
</picture>

這種方法的優點

• 不需要 JavaScript： 瀏覽器評估 type 屬性，選擇它支援的最有效的格式，然後只下載該檔案。
• 防止佈局移動： 在後備 <img> 元素上設定明確 width、height 和 loading="lazy" 屬性會保留頁面上的佈局空間，從而防止累積佈局移動 (CLS)。

3. 自動化CDN端影像優化

如果您想要讓 HTML 標記保持簡單，您可以將圖片最佳化工作轉移到託管平台和 CDN（例如 Cloudflare 或 Vercel）。

這些服務讀取瀏覽器傳入的 Accept 請求標頭（例如 image/avif,image/webp,*/*），並以客戶端支援的最有效格式動態轉譯、快取和提供圖像。

• 範例（Cloudflare 圖像 API）： 請求 /cdn-cgi/image/format=auto,width=800/image.jpg 指示 CDN 根據客戶端的功能自動傳回大小正確的 WebP 或 AVIF 檔案。

結論

優化網站的圖片是提高頁面載入速度的直接方法。

1. **在 WebP 上標準化一般資源，並添加 AVIF 以獲取高品質照片。 **
2. **使用 HTML <picture> 元素建立從 AVIF 到 JPEG 的後備。 **
3. **考慮使用自動 CDN 優化來保持標記乾淨。 **

實施這些策略將減少頁面大小並加快使用者的渲染時間。