圖片通常是網頁裡最重的東西,所以格式選擇會實際影響載入時間——也影響你的 Core Web Vitals 與 SEO。這篇教你怎麼選。
這件事我們自己測過。 結論是:根本沒有「比較小的格式」這種東西。同一個轉換器、同樣的預設設定、兩張圖:照片小了 85%,介面截圖卻大了 142%。哪個格式贏,取決於圖裡裝了什麼,遠多於取決於格式本身。 看完整實測數據
四張測試圖裡有一個格式全贏。 PNG → WebP,用我們自己的轉換器量:照片 1.88 MB → 303.1 KB(-84%)、介面截圖 18.0 KB → 7.3 KB(-59%)、平面插畫 34.7 KB → 10.2 KB(-71%)、透明標誌 28.8 KB → 7.5 KB(-74%)且透明保住。沒有其他目標格式在四張上全都做到。誠實的補充寫在實測室:來源是 GIF 時 WebP 反而大了 27%,所以「WebP always wins」是簡化說法,不是定律。
依用途快速決定
- 照片:WebP(並備 JPEG 退路)。同畫質下 WebP 比 JPEG 小約 25–35%。想要最小、且讀者用現代瀏覽器,就上 AVIF。
- logo、圖示、簡單圖形:SVG——檔案極小,放到任何尺寸都銳利。
- 截圖、含文字的圖、需要透明:PNG(或同樣支援透明的 WebP)。
- 動畫:短片(MP4/WebM)勝過肥大的 GIF;簡單情況可用動態 WebP。
我們自己的實測支持那張表。PNG → WebP,四種不同類型的圖:照片 1.88 MB → 303.1 KB(-84%)、介面截圖 18.0 KB → 7.3 KB(-59%)、平面插畫 34.7 KB → 10.2 KB(-71%)、透明標誌 28.8 KB → 7.5 KB(-74%)且透明保住。一個格式在四張上全贏,這正是為什麼這個建議聽起來很無聊。
為什麼格式會影響速度
每一 KB 都算進你的 Largest Contentful Paint。本來 400 KB WebP 就夠,卻放 2 MB JPEG,會拖慢頁面、傷害行動使用者,也拉低排名訊號。解法通常是:對的格式 + 對的尺寸 + 合理壓縮。
在你寫下「一律這樣做」之前,值得知道那個誠實的例外。我們 4.3 KB 的透明 GIF 轉 WebP 出來是 5.4 KB(+27%)—— 面對一張很小的調色盤圖,現代編碼沒有東西可以拿回來。「全部轉 WebP」平均而言正確,對「本來就小、本來就有損」的檔案則是錯的。
一個簡單流程
- 依上面清單選格式。
- 縮放到圖片實際顯示的最大尺寸——不是相機的全解析度。
- 壓縮把最後的位元組修掉。
格式細節見 AVIF vs WebP vs JPEG 與 WebP 是什麼。
免費、在瀏覽器本機做
一句話:照片用 WebP、logo 用 SVG、透明用 PNG,上線前一定先縮放 + 壓縮。
格式速查表
| 格式 | 最適合 | 透明 | 動畫 | 壓縮 |
|---|---|---|---|---|
| JPEG | 照片 | 否 | 否 | 有損 |
| PNG | 截圖、純色圖形 | 是 | 否 | 無損 |
| WebP | 照片與圖形皆可 | 是 | 是 | 有損+無損 |
| AVIF | 最小的照片 | 是 | 是 | 有損+無損 |
| SVG | logo、圖示、線條圖 | 是 | 是(CSS) | 向量 |
| GIF | 僅舊式動畫 | 1 位元 | 是 | 調色盤 |
看這張表請依圖片的內容,而不是依習慣。一個純色 logo 存成 PNG 可能有 40 KB;同一個 logo 存成 SVG 常常不到 5 KB,而且放到任何尺寸都銳利。反過來,一張照片存成 PNG 可能比 JPEG 或 WebP 版本大上好幾倍,因為無損壓縮無法丟掉照片裡滿滿的細微色階。若你在兩個經典格式之間拿不定,可參考 PNG 與 JPG 怎麼選。
相容性的取捨
越新的格式檔案越小,但涵蓋的裝置越少。AVIF 檔案最小,但較舊的瀏覽器與部分郵件軟體還無法顯示;WebP 如今幾乎到處都能用。專業做法不是全站只挑一種格式,而是提供新格式並附退路,讓每個瀏覽器各取它看得懂的最好版本。
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="產品主圖" width="1200" height="800" />
</picture>瀏覽器會先試 AVIF,再試 WebP,都不行才退回 JPEG。而 width 與 height 屬性會預留空間,讓圖片載入時版面不會跳動——這又是一個 Core Web Vitals 的加分。
相容性的取捨是有價目表的,而那個價錢就是「你跟現代格式一起出的那個後備」的成本。把我們那張 WebP 插畫轉回較舊的格式:
| 轉換 | WebP 輸入 | 結果 | 變化 |
|---|---|---|---|
| WebP → JPG | 10.8 KB | 23.7 KB | +119% |
| WebP → PNG | 10.8 KB | 94.0 KB | +769% |
| WebP → JPG | 7.6 KB | 16.5 KB | +118% |
同一張圖,JPG 後備要 23.7 KB(+119%)、PNG 後備要 94.0 KB(+769%)。當瀏覽器選到錯的那一支時,一個帶兩個 source 的 <picture> 實際上就是這個重量 —— 所以誠實的問題不是「WebP 有沒有支援」,而是「拿到後備的那些訪客要付多少」。
不好決定時這樣選
- 需要透明的照片? 用 WebP 或 AVIF——它們是唯一同時兼顧高壓縮率與透明通道的點陣格式。
- 要能縮放的圖示? 先用 SVG;只有在圖稿太細、難以乾淨向量化時才退回 PNG。
- 動畫? 優先用 MP4/WebM 影片。10 秒的片段做成 GIF 可能好幾 MB,做成影片常常只有幾十 KB。
常見問題
WebP 一定比 JPEG 小嗎?
照片幾乎都是——同樣視覺品質下大約小 25–35%。圖片很小時差距會縮小,某些高度最佳化的 JPEG 偶爾也能打平,所以每個位元組都重要時請實測。
我該刪掉 JPEG 和 PNG 嗎?
不用。留著當退路,也當母檔。從原始來源轉成 WebP,會比從已經有損的 JPEG 再轉,得到更乾淨的結果。