ENsearch btn

2017-08-12
Eric Wang

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

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

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

 

JPG、GIF、PNG、SVG檔比較表

圖檔

GIF檔

JPG檔

PNG檔

SVG檔

漸層色彩

不佳

透明背景


(IE6以下不支援透明背景)

支援動畫效果

檔案大小

較小

較大

適用時機

  1. Icon圖示
  2. 圖片無漸層色彩
  3. 圖片需透明背景
  4. GIF動畫
  1. 全彩照片
  2. 含漸層色彩的圖片
  1. 網頁介面
  2. 圖片需漸層又透明的背景
  1. Icon圖示
  2. 圖片需透明背景
  3. 向量格式的圖片

 

SVG檔的特色

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

 

GIF檔的特色

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

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

 

網頁設計 gif檔

 

JPG檔的特色

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

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

 

網頁設計 jpg檔


PNG檔的特色

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

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

 

網頁設計 png檔

 

 

 

cadiis

Eric Wang

凱士網頁設計公司 專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。

 

 

 

好的形象網站設計,可以幫助公司提升品牌形象與企業價值,透過清楚的網站架構與視覺設計,造就良好的使用者體驗與企業形象。

 

需要網站設計服務嗎?

凱士為您設計優質的

形象網站、公司網站、企業網站、
客製化網頁設計

 

立即填表諮詢

想進一步了解網頁設計服務?