網站圖片最佳格式選擇：格式選擇矩陣與實作建議

選對圖片格式，有時比任何壓縮技巧都更有效。同一張圖片，存成不同格式，檔案大小可能差距數倍，視覺品質卻幾乎看不出差異。本文帶你徹底了解各種圖片格式的適用場景，以及如何在 Core Web Vitals 時代做出最佳選擇。

主流圖片格式一覽

在深入比較之前，先了解各主流格式的基本特性：

• JPEG（.jpg/.jpeg）：發布於 1992 年，至今仍是網路上最常見的照片格式。有損壓縮，不支援透明度，色彩表現優秀，壓縮率高。
• PNG（.png）：無損壓縮，支援透明度（Alpha 通道），適合需要保留精確細節的圖片。同樣內容的 PNG 通常比 JPEG 大 3–5 倍。
• GIF（.gif）：最多 256 色，支援簡單動畫，不適合高品質靜態圖片。
• SVG（.svg）：向量格式，以 XML 描述圖形，可無限縮放不失真，適合圖示和插圖。
• WebP（.webp）：Google 於 2010 年發布，同時支援有損和無損，支援透明度和動畫，是現代網站的首選格式之一。
• AVIF（.avif）：基於 AV1 編解碼器，2019 年正式規格化，壓縮效率領先所有格式，但編碼較慢。

格式選擇矩陣

根據圖片類型和使用場景選擇格式：

• 照片（風景、人物、產品）：首選 WebP（有損），次選 JPEG。不建議 PNG（檔案過大）。
• LOGO / 品牌識別：首選 SVG（向量，可縮放），若必須使用點陣圖則選 PNG（需要透明背景）。
• 圖示（Icon）：首選 SVG，不適合縮放的複雜圖示可用 PNG，Icon Font 也是選項。
• 截圖、UI 示意圖：首選 PNG（無損，邊緣清晰），次選 WebP 無損。
• 動畫：簡單動畫首選 CSS 動畫或 Lottie（SVG 動畫），複雜動畫選 WebP 動畫或 MP4（影片格式），避免 GIF（品質差、檔案大）。
• 插圖、扁平設計：有限色彩的插圖選 SVG，複雜漸層插圖選 WebP 或 PNG。
• 印刷品轉網頁：選 JPEG 或 WebP，並根據網頁顯示尺寸重新取樣。

格式對 Core Web Vitals 的影響

自 2021 年 Google 將 Core Web Vitals 納入搜尋排名因素後，圖片格式的選擇變得更加重要。三個核心指標中，兩個與圖片直接相關：

LCP（Largest Contentful Paint）

LCP 測量頁面最大可見內容的載入時間，目標是 2.5 秒以內。最大可見內容通常是英雄圖（Hero Image）。對 LCP 的影響：

• 使用 WebP 替代 JPEG，可讓英雄圖縮小 25–35%，直接縮短載入時間
• 為英雄圖加上 <link rel="preload">，讓瀏覽器提前下載
• 避免在英雄圖使用 CSS background-image（不會被 preload 掃描器偵測到）

CLS（Cumulative Layout Shift）

CLS 測量頁面佈局穩定性。圖片載入前後若未預留空間，會導致頁面跳動。解決方式：

• 在 <img> 標籤上明確指定 width 和 height 屬性
• 使用 CSS 的 aspect-ratio 屬性預留圖片空間

WebP 的全面推薦

WebP 已成為現代網站的最佳實踐格式，原因如下：

• 相同視覺品質下，比 JPEG 小 25–34%，比 PNG 小 26%
• 同時支援有損和無損壓縮，一種格式應對多種場景
• 支援 Alpha 透明通道，可完全取代 PNG
• 支援動畫，可作為 GIF 的替代品（且品質更好、檔案更小）
• 瀏覽器支援率：截至 2024 年，全球 97% 以上的瀏覽器支援 WebP

在 HTML 中使用 <picture> 元素提供 WebP 優先、JPEG 備用的方案：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="產品描述">
</picture>

AVIF：效率最高但需要衡量成本

AVIF 在壓縮效率上全面超越 WebP，但有幾個實際考量：

• 優點：同品質下比 WebP 小 20–50%，支援 HDR、10-bit 色彩
• 缺點：編碼速度比 WebP 慢 10–20 倍，大量圖片的網站需考慮伺服器或建置時間成本
• 瀏覽器支援：Chrome 85+、Firefox 93+、Safari 16.4+（2023 年以後的設備已接近普及）
• 建議策略：使用 <picture> 元素提供 AVIF → WebP → JPEG 三層降級方案

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="產品描述">
</picture>

SVG：被低估的網頁格式

SVG（可縮放向量圖形）在網站設計中的使用仍然不夠普遍，但它對許多場景都是最佳選擇：

• LOGO 和品牌識別必須使用 SVG，確保在任何螢幕尺寸（包括 Retina）下都清晰
• 圖示系統（Icon system）使用 SVG sprite 或 inline SVG，可輕易控制顏色和大小
• 資訊圖表、圖解、地圖等複雜向量圖形，SVG 既清晰又可互動
• SVG 可直接嵌入 HTML，免去額外 HTTP 請求
• 可通過 SVGO 工具優化 SVG 檔案大小，通常可縮小 20–50%

實作建議清單

1. 網站上所有的 JPEG 照片，計劃逐步替換為 WebP
2. 為英雄圖和關鍵圖片加上 AVIF 版本，使用 <picture> 三層降級
3. 所有 LOGO、圖示改用 SVG 格式
4. 停止在靜態圖片上使用 GIF，改用 CSS 動畫、WebP 動畫或 MP4
5. 為所有 <img> 標籤指定明確的 width 和 height，防止 CLS
6. 對非首屏圖片使用 loading="lazy" 延遲載入
7. 整合圖片 CDN（Cloudinary、imgix 等），自動依瀏覽器能力回傳最佳格式

格式選擇的常見誤區

• 誤區一：「照片一律用 PNG 才清晰」。PNG 對照片來說代價極高，且視覺上不比 WebP/JPEG 好多少。照片請用 WebP 或 JPEG。
• 誤區二：「WebP 所有瀏覽器都不支援」。這已是過時資訊。2024 年 WebP 支援率超過 97%，大膽使用。
• 誤區三：「SVG 只能用在簡單圖形」。SVG 支援複雜濾鏡、動畫和漸層，可表現相當複雜的視覺效果。
• 誤區四：「格式轉換只要換副檔名」。真正的格式轉換需要重新編碼，僅改副檔名不會改變實際格式。

結語

在現代網站開發中，WebP 是幾乎所有場景的最佳起點，搭配 SVG 處理向量元素，以及 <picture> 元素提供的格式降級機制，你可以在不犧牲兼容性的前提下，讓網站圖片盡可能地輕量化。隨著 AVIF 瀏覽器支援持續提升，未來幾年內它將成為新的標準首選。

不上傳的做法

如果這個檔案是機密的，最安全的做法是讓它根本不離開你的電腦。圖片最佳化完全在瀏覽器裡執行：檔案從你的硬碟讀進記憶體、在本機處理、再寫回硬碟，不會送到任何伺服器。

1. 開啟圖片最佳化。
2. 從你的電腦選擇檔案。它是在本機讀取的，不會上傳。
3. 選擇壓縮程度，和原圖比對結果。
4. 下載結果。原始檔案留在原處。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片最佳化