網頁圖片格式完整指南 — PNG、JPEG、WebP、AVIF
網頁圖片格式完整指南
選擇正確的圖片格式是你能為網站效能所做的最簡單但影響最大的決策之一。每種格式在檔案大小、視覺品質、功能支援和瀏覽器相容性之間有不同的平衡。本指南詳細解析四種主要的網頁圖片格式，讓你能為每張發佈的圖片做出明智的選擇。
JPEG：通用的主力格式
JPEG，全名為 Joint Photographic Experts Group，在過去三十多年來一直是網頁圖片的主導格式。它使用有損壓縮，透過捨棄人眼難以察覺的色彩資訊來達到較小的檔案大小。
優勢：
- 在所有裝置和瀏覽器上具有通用瀏覽器支援。
- 對包含平滑色彩漸層的攝影內容具有出色的壓縮效果。
- 可調整的品質從 0 到 100，對檔案大小提供精細的控制。
- 幾乎所有裝置都提供硬體解碼加速。
劣勢：
- 不支援透明度。JPEG 無法渲染具有透明背景的圖片。
- 有損壓縮在低品質設定下會引入可見的瑕疵，特別是在邊緣周圍的塊狀感和漸層中的條帶現象。
- 對包含銳利文字、純色或硬邊緣的圖片表現不佳。
最佳使用情境： 照片、包含多種顏色的複雜插圖、產品圖片、主視覺橫幅，以及任何通用相容性至關重要的圖片。
PNG：精確與透明度
PNG，即 Portable Network Graphics，被創建為 GIF 的免費且開放的替代方案。它使用無損壓縮，意味著每個像素都與原始圖片完全一致地重現。
優勢：
- 無損壓縮保證零品質衰減，即使經過反覆儲存。
- 完整的 Alpha 透明度支援，實現平滑的邊緣和透視背景。
- 對包含大面積均勻色彩的圖片具有出色的壓縮效果，例如螢幕截圖和平面圖形。
- 支援 24 位元色彩（1670 萬種顏色）和 8 位元索引色彩（256 種顏色）以獲得更小的檔案大小。
劣勢：
- 對於攝影內容，檔案大小明顯大於 JPEG——通常大兩到五倍。
- 沒有原生的動畫支援。若需要動態內容，請改用 GIF 或 WebP。
- 將相機和手機照片儲存為 PNG 會浪費大量頻寬。
最佳使用情境： 標誌、圖示、螢幕截圖、UI 模型圖、包含文字的圖片、需要透明度的圖形，以及任何逐像素精確重現不可妥協的情境。
WebP：現代的全能格式
WebP 是由 Google 開發的現代圖片格式。它旨在用一種格式取代 JPEG、PNG 和 GIF，更有效率地處理所有主要使用情境。
優勢：
- 在單一格式中同時支援有損和無損壓縮。
- 有損 WebP 在相同視覺品質下通常比 JPEG 小 25% 到 35%。
- 無損 WebP 比 PNG 小 20% 到 25%。
- 在有損和無損模式下都支援 Alpha 透明度。
- 支援動畫，使其成為 GIF 的直接替代品，且檔案大小更小。
- 廣泛的瀏覽器支援：Chrome、Firefox、Edge 以及 Safari 14 及以上版本。
劣勢：
- 較舊的瀏覽器包括 Internet Explorer 和 Safari 13 及更早版本不支援 WebP。
- 編碼速度比 JPEG 慢，但解碼速度相當。
- 並非所有圖片編輯工具都原生支援 WebP。
最佳使用情境： 當檔案大小是優先考量時的網頁圖片、現代網頁應用程式、為支援它的瀏覽器用單一格式取代 JPEG 和 PNG。
AVIF：次世代格式
AVIF（AV1 Image File Format）是最新的成員，建立在 AV1 視訊編解碼器之上。它在所有廣泛支援的圖片格式中提供最佳的壓縮效率。
優勢：
- 在相同視覺品質下，比 JPEG 小最多 50%。
- 比 WebP 小最多 30%。
- 支援有損和無損壓縮。
- 完整的透明度和 HDR 支援，具備廣色域。
- 免版稅且為開放標準。
劣勢：
- 瀏覽器支援仍在增長中。Chrome 和 Firefox 支援 AVIF；Safari 在版本 16 中加入支援。
- 編碼在計算上很昂貴，使其壓縮速度比 JPEG 或 WebP 慢。
- 在圖片編輯和設計工具中的支援有限。
- 在沒有專用硬體的情況下，不適合即時或高產量的編碼情境。
最佳使用情境： 針對現代瀏覽器的尖端網頁專案、需要最大壓縮率的情境、HDR 內容，以及可接受編碼時間的大規模圖片傳輸。
格式對照比較
| 特性 | JPEG | PNG | WebP | AVIF | |---------|------|-----|------|------| | 壓縮類型 | 有損 | 無損 | 有損和無損 | 有損和無損 | | 透明度 | 否 | 是（Alpha） | 是（Alpha） | 是（Alpha） | | 動畫 | 否 | 否 | 是 | 是 | | HDR 支援 | 否 | 否 | 否 | 是 | | 24 位元色彩 | 是 | 是 | 是 | 是 | | 相對檔案大小 | 基準 | JPEG 的 200-500% | JPEG 的 65-80% | JPEG 的 50-70% | | 瀏覽器支援 | 通用 | 通用 | 95%+ 的使用者 | 85%+ 的使用者 | | 編碼速度 | 快速 | 中等 | 中等 | 慢 |
如何選擇格式
對於每張要發佈的圖片，遵循此決策樹：
- 是照片且不需要透明度？使用 JPEG 或 AVIF 以獲得最大壓縮率。
- 需要透明度或包含文字和銳利邊緣？使用 PNG 以獲得通用支援，或 WebP 以用於現代瀏覽器。
- 需要動畫？使用 WebP 代替 GIF，檔案顯著更小。
- 目標是絕對最大壓縮率？若你的受眾使用現代瀏覽器，使用 AVIF。
以原始格式壓縮你的圖片
一旦你為你的使用情境選擇了正確的格式，請在不轉換為其他格式的情況下最佳化檔案大小。我們的免費線上圖片壓縮工具支援 PNG、JPEG、WebP 和 AVIF——上傳你的圖片，下載保持原始格式的壓縮版本。無需破壞品質的轉換鏈，無需不必要的步驟。