前端圖片格式選擇，什麼時候該用 JPG、PNG、WebP 或 SVG 呢？

各格式比較

格式	壓縮方式	透明度	動畫	適合用途
JPG	失真壓縮	❌	❌	相片、複雜色彩圖片
PNG	無失真壓縮	✅	❌	需透明背景的圖示、截圖
WebP	失真/無失真	✅	✅	現代瀏覽器的通用替代格式
SVG	向量圖形	✅	✅	LOGO、圖示、簡單插圖

JPG（JPEG）

• 優點：檔案小，適合照片類影像
• 缺點：失真壓縮，不支援透明；壓縮過多會產生雜訊
• 適用場景：背景圖、產品照、相片

PNG

• 優點：無失真，支援透明（alpha 通道）
• 缺點：檔案通常比 JPG 大
• 適用場景：需要透明背景的 UI 元件、截圖、有文字的圖片

WebP

• 優點：比 JPG 小約 25~35%，支援透明與動畫，兼具失真/無失真壓縮
• 缺點：舊瀏覽器（IE）不支援
• 適用場景：現代專案的首選格式，可取代 JPG 和 PNG

<!-- 使用 <picture> 做降級處理 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="範例圖片">
</picture>

SVG

• 優點：向量圖形，任意縮放不失真；可用 CSS 修改樣式；檔案小
• 缺點：不適合複雜色彩的相片
• 適用場景：LOGO、圖示（icon）、插圖、動態圖形

選擇建議

• 相片類 → WebP（優先），次選 JPG
• 需要透明 → WebP（優先），次選 PNG
• 圖示 / LOGO → SVG
• 不考慮舊瀏覽器 → 優先使用 WebP