網頁圖片優化完整指南：讓網站載入快三倍

在多數網站上，圖片佔了總傳輸量的 50–70%。這代表圖片優化通常是投報率最高的效能改善——而且 Google 已把頁面體驗納入排名因素。

① 尺寸：別讓瀏覽器做縮放

最常見的浪費：上傳 4000 像素的圖，卻用 CSS 縮成 600 像素顯示。使用者下載了整整 4000 像素的資料，卻只看到 600 像素的畫面。

做法：輸出實際顯示寬度的 1–2 倍（考慮高解析度螢幕），用尺寸調整工具處理。

② 格式：優先使用 WebP

同畫質下 WebP 比 JPG 小 25–35%，比 PNG 小 50% 以上，且所有主流瀏覽器都支援。轉換工具可批次處理。

③ 一定要寫 width 與 height

<img src="photo.webp" alt="說明" width="1200" height="800">

沒有指定尺寸時，瀏覽器在圖片載入前不知道要預留多少空間，只能先當成 0 高度，等載入後才把內容往下推——這就是所謂的版面位移（CLS），是 Core Web Vitals 的評分項目之一，也是最惱人的使用體驗之一（正要點按鈕，畫面突然跳動）。

填入原始像素尺寸即可，實際顯示大小仍可用 CSS 控制：

img { max-width: 100%; height: auto; }

④ 延遲載入，但首屏不要

<img src="..." loading="lazy" decoding="async">

loading="lazy" 讓瀏覽器只在圖片接近可視範圍時才下載，可大幅減少初次載入的流量。

但首屏的主要圖片千萬不要加——那會延後它的顯示時間，反而讓 LCP（最大內容繪製）變差。首圖應該用 fetchpriority="high" 提高優先度。

⑤ 善用 CDN 與快取

把圖片放在 CDN 上，訪客會從距離最近的節點取得檔案。同時設定長效快取（例如一年），讓回訪的使用者不必重複下載。

設定長效快取的前提是檔名不重複——每個網址永遠對應同一份檔案。若圖片會更新，應該改用新檔名而不是覆蓋。

完整範例

<!-- 首屏主圖：不 lazy，提高優先度 -->
<img src="hero.webp" alt="產品主圖"
     width="1600" height="900" fetchpriority="high">

<!-- 內文配圖：延遲載入 -->
<img src="figure.webp" alt="流程示意圖"
     width="1200" height="800" loading="lazy" decoding="async">

alt 文字別漏掉

alt 是搜尋引擎理解圖片內容的主要依據，也是螢幕閱讀器唯一能傳達的資訊。寫法要點：

檢查清單

相關閱讀：HTML img 語法完整教學、WebP 是什麼？

延伸閱讀