圖片通常是網頁裡最重的東西,所以格式選擇會實際影響載入時間——也影響你的 Core Web Vitals 與 SEO。這篇教你怎麼選。
依用途快速決定
- 照片:WebP(並備 JPEG 退路)。同畫質下 WebP 比 JPEG 小約 25–35%。想要最小、且讀者用現代瀏覽器,就上 AVIF。
- logo、圖示、簡單圖形:SVG——檔案極小,放到任何尺寸都銳利。
- 截圖、含文字的圖、需要透明:PNG(或同樣支援透明的 WebP)。
- 動畫:短片(MP4/WebM)勝過肥大的 GIF;簡單情況可用動態 WebP。
為什麼格式會影響速度
每一 KB 都算進你的 Largest Contentful Paint。本來 400 KB WebP 就夠,卻放 2 MB JPEG,會拖慢頁面、傷害行動使用者,也拉低排名訊號。解法通常是:對的格式 + 對的尺寸 + 合理壓縮。
一個簡單流程
- 依上面清單選格式。
- 縮放到圖片實際顯示的最大尺寸——不是相機的全解析度。
- 壓縮把最後的位元組修掉。
格式細節見 AVIF vs WebP vs JPEG 與 WebP 是什麼。
免費、在瀏覽器本機做
一句話:照片用 WebP、logo 用 SVG、透明用 PNG,上線前一定先縮放 + 壓縮。