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

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

 

網頁設計

CADIIS凱士網頁設計公司,專為中小企業設計、規劃、建置網站

RWD網頁設計 | 網站系統建置 | 客製程式開發 | SEO優化 | 商業攝影 | 主機空間 | 維護諮詢

 

整體
規劃
從產業策略洞悉到網頁設計
專精RWD網頁技術及SEO架構
簡約
設計
堅持化繁為簡的設計理念
讓網頁用戶專注您的產品服務
彈性
管理
透過全站式網站管理系統
讓您隨時調整網站架構與內容
維護
諮詢
不論是網站維護諮詢或網站行銷
我們是您長期的網路策略夥伴

 

有任何網頁設計問題?

跟我們說說您的網站構想,或是目前面臨的網站規劃問題

我們將與您聯絡、共同討論解決方案。

 

網頁設計洽詢