如何運用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檔比較表 

各圖片格式特色說明

SVG檔的特色

• 目前icon跟logo檔案的霸主
• 目前網頁上唯一的向量格式圖檔
• 檔案內的文字可被google搜尋到
• 可以任意放大圖片，也不會失真
• 可用程式碼來描繪圖像
• 可以支援動畫

GIF檔的特色

• 網頁讀取速度最快 (檔案最小)
• 唯一支援動畫效果的格式
• 支援色彩最少 (失真嚴重)

下圖為GIF檔壓縮為「32色」的壓縮結果： 

JPG檔的特色

• 網頁讀取速度中等
• 唯一不支援背景透明的格式
• 支援色彩中等

下圖為JPG檔壓縮品質為30的壓縮結果： 

PNG檔的特色

• 網頁讀取速度最慢 (檔案最大)
• 支援色彩與效果最多，最精緻 (漸層、透明、不失真)
• IE6以下不支援PNG檔的透明背景

下圖為PNG格式為「PNG8」的輸出結果： 

認識網站行銷SEO 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。   您可以直接填寫諮詢表單；撥打諮詢電話 04-22210688；或加入凱士LINE由專人與您聯繫。