2017-08-12
如何運用jpg、gif、png、svg網頁圖檔?(2017更新)
圖片是網頁設計工作中極重要的一環,不論是設計階段的切版,或網站維護階段的圖文內容更新,都需要了解圖檔的正確使用方法。選擇正確的圖檔格式不但能讓網頁畫面呈現最佳狀態,同時也對網站訪客帶來好的使用經驗。
由於近年來新版瀏覽器對SVG格式的支援,SVG向量格式的優勢也取代了GIF/PNG的使用。
JPG、GIF、PNG、SVG檔比較表
圖檔 |
GIF檔 |
JPG檔 |
PNG檔 | SVG檔 |
---|---|---|---|---|
漸層色彩 |
不佳 |
佳 |
佳 |
佳 |
透明背景 |
有 |
無 |
有 |
有 |
支援動畫效果 |
有 |
無 |
無 |
有 |
檔案大小 |
較小 |
中 |
較大 |
小 |
適用時機 |
|
|
|
|
SVG檔的特色
- 目前網頁上唯一的向量格式圖檔
- 檔案內的文字可被google搜尋到
- 可以任意放大圖片,也不會失真
- 可用程式碼來描繪圖像
- 可以支援動畫
GIF檔的特色
- 網頁讀取速度最快 (檔案最小)
- 唯一支援動畫效果的格式
- 支援色彩最少 (失真嚴重)
下圖為GIF檔壓縮為「32色」的壓縮結果:
JPG檔的特色
- 網頁讀取速度中等
- 唯一不支援背景透明的格式
- 支援色彩中等
下圖為JPG檔壓縮品質為30的壓縮結果:
PNG檔的特色
- 網頁讀取速度最慢 (檔案最大)
- 支援色彩與效果最多,最精緻 (漸層、透明、不失真)
- IE6以下不支援PNG檔的透明背景
下圖為PNG格式為「PNG8」的輸出結果:
![]() |
Eric Wang 凱士網頁設計公司 專案經理 Eric,擁有設計與理工背景,擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通,樂於分享與討論,長期致力於網頁設計白話文運動。
|