🗜️
← 返回教學列表

如何為網頁效能最佳化圖片

· 標籤: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

如何為網頁效能最佳化圖片

圖片佔據了典型網頁總下載位元組的 50% 到 60%。每張未最佳化的圖片都會增加載入時間、提高跳出率，並損害你的搜尋引擎排名。Google 的 Core Web Vitals——特別是最大內容繪製（LCP）——直接衡量圖片載入效能，使圖片最佳化成為你可以對網站做出的影響最大的變更之一。

本指南涵蓋了完整的圖片最佳化策略，從壓縮基礎知識到進階的傳輸技巧。

1. 在發佈前壓縮每張圖片

切勿直接上傳來自相機、手機或設計工具的原始圖片。壓縮應是你發佈工作流程中的第一步。

關鍵原則：

  • 照片能夠容忍較激進的有損壓縮。JPEG 和 WebP 從品質 80 開始，若檔案大小目標需要，再向下調整。
  • 螢幕截圖、標誌和圖形則受惠於無損壓縮。PNG 和無損 WebP 可保留有損壓縮會模糊化的銳利邊緣和文字。
  • AVIF 提供最佳的壓縮比率，但需要更多的編碼時間。對於經常下載且很少更新的圖片使用此格式。
  • 以原始格式進行壓縮，避免因不必要的格式轉換而產生的世代損失。

預期節省效果：

一個在上傳前壓縮圖片的典型工作流程，可將圖片總重量減少 40% 到 80%，且幾乎沒有明顯的品質損失。

2. 提供正確的尺寸

在 300 像素寬的容器內提供 4000 像素寬的照片，是網頁上最常見的效能錯誤。瀏覽器會下載全部 4000 像素然後再將其縮小，浪費頻寬和記憶體。

建立多種尺寸變體：

  • 320 到 480 像素寬，用於手機螢幕
  • 768 到 1024 像素寬，用於平板電腦
  • 1200 到 1920 像素寬，用於桌上型顯示器
  • 2560 像素寬，用於高密度 retina 顯示器（2x）

將最大的變體與圖片在你的版面配置中顯示的最大寬度匹配，並針對高 DPI 螢幕乘以 2。

3. 使用帶有 Srcset 的響應式圖片

HTML 中的 srcset 和 sizes 屬性會根據使用者的視窗寬度和裝置像素比，告訴瀏覽器該下載哪個尺寸的圖片。

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Descriptive text for accessibility and SEO"
/>

這個簡單的模式可以在行動裝置上將圖片頻寬減少 40% 到 60%，且沒有任何可見的品質差異。

4. 為最大內容繪製（LCP）最佳化

LCP 衡量最大可見元素（通常是主視覺圖片）渲染所需的時間。Google 認為 LCP 在 2.5 秒或以下為良好。

最佳化圖片的 LCP：

  • 預先載入主視覺圖片，讓瀏覽器提早發現它。在你的文件 head 中加入 <link rel="preload" as="image" href="hero.webp">。
  • 積極壓縮主視覺圖片——它通常是瀏覽器下載的第一個也是最大的資源。
  • 為主視覺圖片提供 WebP 或 AVIF，並以 JPEG 作為備用方案。
  • 正確設定主視覺圖片的尺寸。不要在 1200 像素的主視覺區域中提供 4000 像素的圖片。
  • 不要對主視覺圖片或任何位於首屏的圖片使用延遲載入。延遲載入會延遲下載，從而損害 LCP。

5. 為非首屏圖片啟用延遲載入

在初始畫面中不可見的圖片不需要立即載入。loading="lazy" 屬性告訴瀏覽器將圖片載入推遲到圖片接近進入視窗前。

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

延遲載入可將圖片密集型頁面的初始頁面重量減少 30% 到 50%。與壓縮結合使用，影響是變革性的。

6. 移除圖片中繼資料

EXIF 資料——相機設定、GPS 座標、時間戳——會為每張圖片增加不必要的位元組。移除中繼資料通常可節省 5% 到 15% 的檔案大小，且完全沒有視覺變化。將中繼資料移除設為壓縮工作流程中的標準步驟。

7. 使用內容傳遞網路（CDN）

CDN 會將你的圖片分發到全球各地的伺服器，縮短使用者與圖片之間的物理距離。這改善了圖片請求的 Time to First Byte。

部分 CDN 還提供即時的圖片轉換功能：

  • 自動格式協商（在支援時提供 WebP 或 AVIF）
  • 根據裝置和視窗動態調整大小
  • 即時壓縮調整

如果無法使用專用的 CDN，至少使用 HTTP/2 或 HTTP/3，以便在單一連線中同時下載多張圖片。

8. 考慮圖片解碼效能

大型圖片不僅需要時間下載，也需要時間解碼。瀏覽器必須在渲染 JPEG、PNG、WebP 或 AVIF 資料之前先對其解壓縮。JPEG 和 WebP 在大多數裝置上解碼速度很快，而 AVIF 解碼的計算成本較高——這是對低階行動裝置需要考慮的因素。

在非關鍵圖片上使用 decoding="async" 屬性，讓瀏覽器在不阻塞其他內容的情況下進行解碼：

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

建立你的最佳化工作流程

一個端到端的圖片最佳化流程如下所示：

  1. 使用適合品質的工具，以原始格式壓縮圖片。
  2. 在壓縮期間移除中繼資料。
  3. 調整為所需的顯示尺寸，建立多種變體。
  4. 在你的 HTML 範本中實現 srcset 和 sizes。
  5. 預先載入主視覺圖片，對所有非首屏內容使用延遲載入。
  6. 透過 CDN 提供以獲得全球效能。
  7. 使用 Lighthouse 或 PageSpeed Insights 測量 LCP 和圖片總重量。
  8. 反覆調整品質設定，直到滿足你的效能預算。

立即使用我們的免費線上圖片壓縮工具開始最佳化你的圖片。上傳 PNG、JPEG、WebP 或 AVIF 格式的圖片，下載可直接用於生產環境的壓縮版本——無需格式轉換，無需品質妥協。