為什麼影像主導著頁面體積
一個帶 CSS 和 JavaScript 的典型 HTML 文件可能傳輸 200–500 KB。一張未最佳化的照片可以是 5–15 MB。在平均 10–20 Mbps 的行動連線上，一張 10 MB 的影像需要 4–8 秒下載。大多數訪客不會等。
影像還影響 Core Web Vitals——Google 用於影響搜尋排名的頁面體驗指標。Largest Contentful Paint（LCP）衡量最大的可見元素算繪所需的時間。如果那個元素是一張主圖，它的下載時間就直接決定你的 LCP 分數。慢的 LCP 同時損害使用者體驗和搜尋排名。
常見的嫌疑者，以及各自的解決
影像載入緩慢幾乎總是歸結到其中之一。每個都有一個快速的解決和有意義的回報：
| 原因 | 解決 | 典型節省 |
|---|---|---|
| 格式錯誤（PNG 照片） | 轉換為 WebP 或 JPG | 80% 或更多 |
| 整解析度上傳 | 調整到約 2 倍的顯示寬度 | 70–80% |
| 壓縮薄弱或被跳過 | 以品質 75–85 匯出 | 相對品質 95 為 3–5 倍 |
| 無延遲載入 | 在摺疊以下添加 loading=lazy | 首次載入資料更少 |
| HEIC 未轉換就提供 | 先轉換為 WebP 或 JPG | 避免損壞的影像 |
內容類型用錯了格式
給照片用 PNG 是網路上最常見的影像錯誤之一。PNG 是無損的並保留每個像素，這對標誌和截圖重要，但對照片不重要。一張存為 PNG 的照片可以是 15–25 MB。同一張照片存為高品質 JPEG 是 2–5 MB。存為 WebP 可以在相同可見品質下低於 2 MB。
反過來也是錯誤：給截圖、圖表或帶文字的影像用 JPEG。JPEG 在硬邊緣和平塗色區域引入可見失真，需要高品質設定而產生大檔案。PNG 或 WebP 把這類內容處理得更小更乾淨。
以完整相機解析度上傳影像
一張現代智慧型手機的照片是 12–50 百萬像素、寬 3000–8000 像素。大多數網頁以 600–1600 像素寬顯示內容影像。當你把完整解析度的相機檔案上傳到你的網站時，瀏覽器下載全部 8000 像素並把它縮放到 800 像素來顯示。你傳輸的資料是所需的 10 倍。
在上傳前把影像調整到它將被顯示的最大寬度——高密度螢幕約為 CSS 顯示寬度的兩倍——往往是單獨可用的最大的大小縮減。一張 4000 像素的影像調整到 1600 像素，通常在套用任何品質壓縮之前就小 70–80%。
跳過壓縮或使用錯誤的品質設定
許多內容管理系統在沒有壓縮的情況下接受並儲存上傳的影像。WordPress、Squarespace、Shopify 和類似平台可能預設施加一些壓縮，但設定各異且往往保守。上傳的原圖可能遠大於所需。
對 JPEG 和 WebP，品質 75–85 對大多數顯示在網頁上的照片是合適的。低於 75，壓縮失真變得可見。高於 85，檔案大小顯著增加而視覺改善遞減。許多開發者預設用品質 95 或 100，這產生比品質 80 大 3–5 倍的檔案，而在正常檢視尺寸下沒有可見差別。
摺疊以下的影像沒有延遲載入
預設情況下，瀏覽器會在初始算繪期間嘗試載入頁面上的所有影像，包括遠在可見區域（摺疊）以下的影像。對一個有 10 張影像的長文章頁面，即使讀者可能永遠不會捲動到看見大多數，瀏覽器也會嘗試同時下載全部 10 張。
<img> 標籤上的 loading="lazy" 屬性指示瀏覽器把影像的載入推遲到它即將進入可視區域，這顯著減少首次頁面載入所傳輸的資料。把它套用到第一個可視區域中不可見的所有影像。不要把它套用到主圖或摺疊以上的任何影像——那些需要為良好的 LCP 分數盡快載入。
尤其對主圖，添加 fetchpriority="high" 讓瀏覽器先於指令碼和其他影像取得它。每頁只在一張影像——LCP 元素——上使用它，其餘保持預設。
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
缺少 width 和 height 屬性
當瀏覽器開始算繪一個頁面時，它還不知道尚未下載的影像的尺寸。HTML 中沒有明確的 width 和 height 屬性，瀏覽器就無法預留正確的空間，頁面版面會在影像載入時移動——一種被稱為 Cumulative Layout Shift（CLS）的刺眼的視覺跳動。添加明確的尺寸可防止版面移動，並讓瀏覽器在不等待影像下載的情況下開始版面：
<img src="photo.webp" width="800" height="533" alt="description" />
直接上傳 HEIC 或不尋常的格式
iPhone 預設以 HEIC 拍攝。如果 HEIC 檔案被上傳到網站並未經轉換就提供，它們將在 Chrome、Firefox 和 Edge 中顯示失敗。Windows 和 Android 上的訪客看到一個損壞影像圖示。發布前務必把 HEIC 轉換為 JPEG 或 WebP。
一份實用的最佳化清單
PhotoTools 在你的瀏覽器中處理格式轉換、調整尺寸和壓縮步驟，不向伺服器上傳任何東西。上傳前先處理影像以保持你的頁面快速，並過一遍這份清單：
- 照片和大多數網頁影像用 WebP。帶文字或透明的圖形用 PNG。
- 把影像調整到它實際會顯示的最大寬度——視網膜螢幕約為 CSS 顯示寬度的 2 倍。
- 標準網頁影像把 JPEG 和 WebP 以品質 75–85 壓縮。
- 給摺疊以下的所有影像添加 loading="lazy"。
- 給所有影像添加明確的 width 和 height 屬性。
- 上傳前把 HEIC 檔案轉換為 JPEG 或 WebP。
- 驗證最終檔案大小：以 800 CSS 像素寬顯示的網頁影像在大多數情況下應低於 200 KB。