圖片格式怎麼選？PNG、JPEG、SVG、WebP 與 AVIF
目前在製作網頁時，通常都需要根據圖片的內容與使用情境，選擇適合的圖片格式。選對格式除了可以減少網路傳輸量，也能在維持畫質的同時，讓網頁載入得更快。那接下來就來看看有哪些圖片格式可以選擇吧！
PNG
PNG 使用無損壓縮，圖片資料解壓縮後可以保留原本的畫質，也支援透明與半透明效果。它適合線條與輪廓需要清楚、顏色較單純，或需要透明背景的圖片。
常見的使用情境如下：
- logo
- 貼圖
- 浮在背景上的裝飾圖片
- UI 元件素材
- 需要保留清晰文字的截圖
不過，PNG 使用無損壓縮不代表檔案一定比較小，尤其是照片或細節複雜的圖片，通常會比 JPEG、WebP 或 AVIF 大。簡單的 logo 或 icon 則可以優先考慮 SVG，因為 SVG 能在不同尺寸下維持清晰，檔案也可能更小！
JPEG
JPEG 適合顏色多、漸層豐富、細節複雜，而且可以接受些微畫質損失的圖片。它使用有損壓縮，調整壓縮品質後，通常能大幅減少檔案大小，但壓縮程度太高時，可能會出現模糊或壓縮痕跡。
如果用在大圖上，可以降低不少傳輸資料量。像是網頁 hero 區塊的圖片，往往會占據很大的面積，適度降低檔案大小就能幫助加快網頁載入速度！還有以下適合的情境：
- 人物照片
- 旅遊風景
- 食物照片
- 商品攝影
- 活動照片
- 背景照片
- 部落格文章中的實景照片
- 社群分享圖裡以照片為主的內容
JPEG 不支援透明背景；如果圖片需要去背，應該改用 PNG、WebP 或 AVIF 等支援透明度的格式。
SVG
SVG 是以向量描述圖片，不是儲存固定數量的 pixel。主要看圖片是否由簡單的線條、幾何形狀和少量顏色組成，以及後續是否需要用程式控制。這類圖片使用 SVG 通常能保有清晰輪廓，也能在適當的嵌入方式下透過 CSS 或 JavaScript 控制顏色、尺寸和動畫狀態；如果是簡單圖形，SVG 的檔案也常比 PNG 或 JPEG 小！
使用情境像是 icon、簡單的公司 logo、按鈕圖示，都是常見例子。如果同一個 icon 需要配合淺色與深色主題變換顏色，或在 hover 時做放大、變色和漸層動畫，就可以使用 inline SVG 或 SVG sprite，讓 CSS 共用並控制同一份圖形，在製作動畫效果時也會比較好控制細節。
不過，SVG 並不是所有圖片都適合使用。遇到照片或非常複雜的插畫時，SVG 需要描述大量的形狀，檔案可能反而更大，也可能增加瀏覽器的處理成本。
WebP
WebP 支援有損與無損壓縮、透明度和動畫。在相近畫質下，WebP 通常可以比 JPEG、PNG 產生更小的檔案，因此對一般網頁圖片來說，是很實用的選擇，可以減少網路傳輸量並改善載入速度！
如果要看瀏覽器支援度，可以參考 WebP 的支援狀況。
它可以涵蓋 JPEG 與 PNG 常見的許多使用情境，但最後仍然要依圖片內容、畫質與壓縮後的檔案大小判斷。
如果網站需要支援較舊或不確定的瀏覽器，可以透過 <picture> 提供 WebP，再用 JPEG 或 PNG 作為 fallback。
AVIF
AVIF 是以 AV1 影像編碼為基礎的圖片格式，支援有損與無損壓縮、透明度、動畫，以及較高色彩深度。以相近的視覺品質來說，AVIF 通常可以比 WebP 產生更小的檔案，但不是每一張圖片都一定如此。
AVIF 的編碼速度通常比 WebP 慢，解碼效能則會依圖片、瀏覽器與使用者裝置而不同。因此，除了比較檔案大小，也要實際確認編碼流程與載入體驗是否能接受。
目前 瀏覽器對 AVIF 的支援度 已經蠻高，但較舊的瀏覽器或特殊環境仍可能不支援。若要使用 AVIF，建議搭配 WebP、JPEG 或 PNG 提供 fallback！
總結
沒有一種圖片格式適合所有情境，可以先根據圖片內容和需求做選擇：
- PNG：需要無損畫質、清楚線條、文字或透明背景的圖片。
- JPEG：照片或細節豐富的靜態圖片，而且可以接受些微畫質損失。
- SVG：簡單的 icon、logo、幾何圖形，或需要隨畫面縮放、用 CSS 或 JavaScript 控制的圖片。
- WebP：想在瀏覽器支援度、檔案大小與功能之間取得平衡時，通常是很好的預設選擇。
- AVIF：想追求更小檔案或更好的色域，而且願意處理編碼成本與 fallback 時可以考慮。
最後不要只看格式名稱的優缺點。同一張圖片使用不同的品質參數壓縮，結果可能完全不同；實務上可以準備幾種格式，實際比較檔案大小與畫質，再用 Network 或 Performance 工具觀察對載入速度的影響。如果需要支援較舊的瀏覽器，也要記得保留 JPEG 或 PNG fallback，避免使用者的設備不支援新版圖片！
選好格式之後，下一步還要處理「要送多大的圖片」與「什麼時候開始載入」。後面的 Responsive Image 會用 srcset、sizes 與 <picture> 依顯示情境提供不同候選，再由 Lazy Loading 決定非首屏圖片是否延後請求，形成「格式 → 尺寸 → 載入時機」的完整順序。