如何修復 PageSpeed Insights 的“改進圖片傳送”提示

1. 01用 PageSpeed Insights 或 Lighthouse 打開有問題的頁面。選擇要改進的手機或桌機報告，展開“改進圖片傳送”，記下圖片 URL 和建議。
2. 02在頁面找到這張圖。用瀏覽器開發者工具比較下載圖片與顯示尺寸，同時考慮螢幕像素密度。檢查瀏覽器選擇的來源檔案，而不只是媒體庫里的原圖。
3. 03如果實際傳送的像素過多，先修正回應式尺寸或佈景主題設定。尺寸合適時，再比較壓縮效果或平台支持的其他格式。
4. 04用圖片編輯器準備所需尺寸的副本，再用Bitinz 圖片壓縮工具處理合適的檔案。替換前檢查文字、邊緣、透明度和漸層。
5. 05發佈新圖片或修改後的範本。確認頁面請求的是新圖而不是舊快取，再以相同裝置設定重新產生報告。

Chrome 根據圖片下載大小和該格式的高效位元組與像素比例估算節省量。預計可節省不足 4 KiB 的圖片不會被標記。這是報告門檻，不是圖片檔案大小上限建議。

Lighthouse 13 用這項深入分析替代了舊版圖片稽核；Lighthouse 12 已將深入分析設為預設報告視圖。格式不合適、尺寸過大和動畫過重需要不同處理。完整發佈流程可參考網站圖片怎麼壓縮。

• WordPress: 檢查區塊或佈景主題選中的圖片尺寸，以及實際的 srcset 和 sizes 標記。WordPress 會產生回應式候選，但自訂範本或不準確的版面描述仍可能傳送不合適的尺寸。只修改原圖，可能仍在使用已有衍生副本。
• Shopify: 商店圖片已由 Shopify 的 CDN 優化，包括格式選擇。Shopify 表示上傳前無需手動壓縮。看到提示時，應檢查佈景主題請求的寬度和回應式標記，不要反覆降低原圖畫質。佈景主題開發者可檢查 image_url 和 image_tag。
• Next.js: 使用 Image 元件的回應式設定，讓 sizes 符合實際版面，尤其是使用 fill 時。值不合適，窄圖也可能被當作檢視區域全寬，導致下載更大候選。只改畫質解決不了版面不一致。

保留可編輯原圖。獨立提供的圖片，應比較準備後檔案的實際檔案大小與觀感；JPG、PNG 和 WebP 對比可幫助選擇。Bitinz 不調整尺寸，WebP 轉換也可能讓檔案變大，請保留真正適合頁面的版本。

經常發佈圖片時，可用開發者 API處理合適檔案，需要帳號並使用每月額度。API 不會修復佈景主題標記或回應式版面；串接自動流程後，仍需核對實際發佈頁。

• 被標記的 URL 與修改的圖片及版本一致。
• 手機與較寬螢幕上的瀏覽器都能選擇合適的來源圖片。
• 壓縮保留了重要細節、透明度和平滑漸層。
• 主要可見圖片沒有因不合適的延遲載入設定而推遲顯示。
• 新報告使用相同裝置設定，也檢查了頁面實際觀感與載入。