按用途選擇合適的圖片格式
發布於 · 更新於 閱讀約 1 分鐘
JPG、PNG、WebP 和 AVIF 適用的圖片並不相同。選哪個取決於圖片的内容：照片、帶文字的截圖，還是透明背景的標志。
參考資料怎麼說
根據 MDN 文件，JPEG 適合照片而不適合線條清晰的圖畫，PNG 保留每個像素的精確值，適合截圖、圖表和標志，WebP 的壓縮效果優於前兩者並支援透明，AVIF 壓縮得更小，同樣支援透明。
同樣的圖片，四種格式
測試使用三張自製圖片：一幅接近照片的 2,400 × 1,600 像素場景、一張 1,400 × 900 像素的截圖和一個 900 × 900 像素的透明標志，三張起初都是 PNG。
| 圖片 | 原始 PNG | JPG | WebP |
|---|---|---|---|
| 照片 | 2,36 MB | 1,08 MB | 1,02 MB |
| 截圖 | 67 KB | 115 KB | 49 KB |
| 透明標志 | 9 KB | 35 KB（白色背景） | 14 KB（保留透明） |
可以得出什麼
對照片來說，JPG 和 WebP 能把大小減掉一半以上。對截圖或標志來說，JPG 比原來的 PNG 還大，參考資料也不建議在邊緣清晰的影像上使用它：PNG 或 WebP 更合適。把 PNG 再轉成 PNG 並不會變小：照片從 2.36 MB 變成了 3.28 MB。
AVIF
AVIF 匯出取決於瀏覽器。不支援時，工具會如實告知，並且不產生檔案。
驗證
- 把得到的大小與原始大小對照一下。
- 放大查看文字邊緣和漸變。
- 保留原始圖片。
想知道哪種格式到處都能開啟，請參閱 哪種圖片格式到處都能開啟。