如何運用jpg、gif、png、svg、WebP、AVIF網頁圖檔？(2025更新)
Kelsey Wang
在網頁設計與數位行銷的世界裡，圖片不僅扮演視覺吸引的角色，也是網頁設計工作中極重要的一環。大家最常聽到一定有JPG、PNG、GIF等，到近幾年開始流行並逐漸運用的SVG與WebP，但每種圖片格式各有特性與適用情境。選擇正確的圖檔格式不但能讓網頁畫面呈現最佳狀態，同時也對網站訪客帶來好的使用經驗。
目前常見的圖片格式
JPG / JPEG
適合於網頁中存放照片、寫實圖像或大量的色彩漸層。
PNG
大家都知道的，就是PNG支援透明背景，畫質細膩。
GIF
簡單動畫圖或表情符號，畫質稍微粗糙一些。
SVG
適合LOGO、ICON、向量圖、簡易圖表等，且縮放不失真。
WebP（2025新趨勢）
因應現今對於圖片要高畫質但載入快速的要求，Google推出了WebP圖片格式，適合照片與插圖，又支援透明與動畫，且各大瀏覽器（Chrome、Safari、Firefox）已開始支援 WebP 格式。另外，目前還有很多軟體未支援WebP的編輯，因此在大部分在網頁上的WebP是透過軟體轉檔或外掛的方式生成。
AVIF（2025新趨勢）
另外一顆新星是AVIF（AV1 Image File Format），它是由 Alliance for Open Media所推動，基於 AV1 影片編碼技術所開發而成，具備不錯的壓縮效率且不影響畫質，唯一比較需要考量的是目前 AVIF 的瀏覽器支援度仍在拓展階段，可以看看未來是否會成為高壓縮網站圖片的新主流。
網站後台支援哪些圖片格式？
凱士網頁的後台支援以上所有的圖片格式，可以讓網站管理員自訂允許上傳的檔案類型。不過，需要注意兩個重要前提：
一併確認伺服器是否支援
若主機尚未設定圖片類型，即使網站後台開放上傳與使用AVIF，也可能無法正確上傳或顯示。
使用者端瀏覽器是否能讀取
通過各種設定後，即使圖片成功上傳，若訪客的瀏覽器尚不支援該格式（例如 Safari 尚未全面支援 AVIF），還是有可能出現圖片無法載入或圖片爆版的情況。
延伸閱讀：網站後台管理時，圖片處理應該注意什麼？
延伸閱讀：網站攝影是什麼？一篇了解商業攝影如何提升網站質感！
JPG、GIF、PNG、SVG檔比較表
| 圖檔 |
GIF檔 |
JPG檔 |
PNG檔 |
SVG檔 |
|
漸層色彩 |
不佳 |
佳 |
佳 |
佳 |
|
透明背景 |
有 |
無 |
有 |
有 |
|
支援動畫效果 |
有 |
無 |
無 |
有 |
|
檔案大小 |
較小 |
中 |
較大 |
小 |
|
適用時機 |
|
|
|
|
各圖片格式特色說明
SVG檔的特色
- 目前icon跟logo檔案的霸主
- 目前網頁上唯一的向量格式圖檔
- 檔案內的文字可被google搜尋到
- 可以任意放大圖片，也不會失真
- 可用程式碼來描繪圖像
- 可以支援動畫
GIF檔的特色
- 網頁讀取速度最快 (檔案最小)
- 唯一支援動畫效果的格式
- 支援色彩最少 (失真嚴重)
下圖為GIF檔壓縮為「32色」的壓縮結果：
JPG檔的特色
- 網頁讀取速度中等
- 唯一不支援背景透明的格式
- 支援色彩中等
下圖為JPG檔壓縮品質為30的壓縮結果：
PNG檔的特色
- 網頁讀取速度最慢 (檔案最大)
- 支援色彩與效果最多，最精緻 (漸層、透明、不失真)
- IE6以下不支援PNG檔的透明背景
下圖為PNG格式為「PNG8」的輸出結果：
