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

由於近年來新版瀏覽器對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檔的特色

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

 

GIF檔的特色

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

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

網頁設計 gif檔

 

JPG檔的特色

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

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

網頁設計 jpg檔


PNG檔的特色

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

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

網頁設計 png檔

 

 

想跟我們談談你的網頁設計構想嗎?

 

 

網頁設計洽詢 >  或撥 04-2221-0688