如何運用jpg、gif、png、svg網頁圖檔？(2017更新)

圖片是網頁設計工作中極重要的一環，不論是設計階段的切版，或網站維護階段的圖文內容更新，都需要了解圖檔的正確使用方法。選擇正確的圖檔格式不但能讓網頁畫面呈現最佳狀態，同時也對網站訪客帶來好的使用經驗。

由於近年來新版瀏覽器對SVG格式的支援，SVG向量格式的優勢也取代了GIF/PNG的使用。

 

JPG、GIF、PNG、SVG檔比較表

圖檔	GIF檔	JPG檔	PNG檔	SVG檔
漸層色彩	不佳	佳	佳	佳
透明背景	有	無	有 (IE6以下不支援透明背景)	有
支援動畫效果	有	無	無	有
檔案大小	較小	中	較大	小
適用時機	Icon圖示 圖片無漸層色彩 圖片需透明背景 GIF動畫	全彩照片 含漸層色彩的圖片	網頁介面 圖片需漸層又透明的背景	Icon圖示 圖片需透明背景 向量格式的圖片

 

SVG檔的特色

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

 

GIF檔的特色

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

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

 

 

JPG檔的特色

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

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

 

PNG檔的特色

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

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

 

 

 

 

Eric Wang 凱士網頁設計公司 專案經理 Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。