網頁效能的圖片壓縮:完整指南
圖片占了平均網頁的大部分重量 — 通常占 50% 以上。壓縮它們是大多數網站能做、影響最大的效能修復,而且完全免費。
本指南涵蓋真正有效的格式、設定與技術。
為什麼圖片大小很重要
圖片的每個 KB 都是下載時間,尤其是在行動裝置上。Google 的研究顯示,減少頁面重量可直接改善 Core Web Vitals 分數和排名。小圖片還能減少你的頻寬費用和碳足跡。
先選擇正確的格式
將 WebP 做為預設,並在想要最小檔案時將 AVIF 用於照片。只有在需要無損時才保留 PNG。格式的選擇比任何品質設定都重要。
使用品質滑桿,而不是百分比
WebP 和 JPG 的品質 75–80 在螢幕上看起來很棒。從 90 降到 75 通常能讓檔案大小減半,且沒有可見差異。務必將結果與原始圖片比較。
在壓縮前先調整尺寸
壓縮一張以 800px 顯示的 4000px 照片,會浪費你大部分位元組。請將尺寸調整為你會顯示的最大大小,然後再壓縮。兩者結合通常可將大小減少 70–90%。
使用延遲載入和 picture 元素
延遲載入螢幕外的圖片,並使用 picture 元素提供 AVIF 或 WebP 並搭配 JPEG 做為備用方案。與壓縮結合後,這些技術讓圖片幾乎零成本。
壓縮每張圖片、使用 WebP 或 AVIF、調整為顯示大小,並延遲載入。這四個習慣可以讓你的頁面重量減半。我們的瀏覽器型壓縮器能在幾秒內為你完成前兩項。