網站圖片格式怎麼選？JPG、PNG、WebP、SVG 的差別

選錯格式，不是變醜就是變慢

同一張圖用不同格式儲存，檔案大小可能差好幾倍，畫質也可能明顯不同。網站上的圖片動輒數十張，格式選擇累積起來會直接影響載入速度。

好消息是規則很單純，記住幾個原則就夠用。

常見格式一覽

三個判斷原則

一、是照片還是圖形？

• 照片（人、產品、環境、風景）→ JPG 或 WebP
• 圖形（Logo、圖示、圖表、線條插圖）→ SVG，做不出 SVG 就用 PNG

用錯的後果很明顯：照片存成 PNG，檔案可能大好幾倍；線條圖存成 JPG，邊緣會出現模糊的雜點。

二、需不需要透明背景？

JPG 不支援透明。去背的產品圖、要疊在有色背景上的圖示，都必須用 PNG、WebP 或 SVG。

常見錯誤：把去背圖存成 JPG，結果背景變成白色方塊，疊在深色區域上就露餡。

三、會不會需要放大？

SVG 是向量，用數學描述線條與形狀，放到多大都清晰，而且檔案通常很小。Logo 與圖示應該優先用 SVG。

其他格式都是點陣圖，由像素構成，放大就會糊。

WebP 該不該用

WebP 在同樣畫質下檔案明顯比 JPG 小，且支援透明與動畫，現在主流瀏覽器都已支援。

對業主而言的實務建議：不必自己轉換。您提供原始的 JPG 或 PNG 即可，讓網站系統在上傳時自動處理成適當格式與尺寸——這是後台該做的事，不該是您的工作。

如果您的後台沒有這個功能，那是值得在網站架設時提出的需求。

SVG 的兩個注意事項

不是所有圖都能做成 SVG

SVG 適合線條與色塊構成的圖形。照片轉成 SVG 沒有意義——檔案會變得極大且效果很差。

SVG 可以包含程式碼

這是常被忽略的資安面向。SVG 本質上是文字檔，可以夾帶腳本。來源不明的 SVG 不應直接上傳，正規的網站系統會在上傳時進行淨化處理。

素材來源的風險見網站版型的授權與安全性風險。

其他會用到的格式

• ICO 或 PNG——瀏覽器分頁上的小圖示，通常需要多種尺寸
• PDF——型錄、規格書、表單下載。注意檔案大小，並確認內容可被選取複製（掃描成圖片的 PDF，搜尋引擎讀不到內容）
• MP4——影片的通用格式，詳見影片與媒體素材的規格

提供素材時的建議

對業主來說，最省事也最正確的做法是：

1. 提供原始檔，不要自己壓縮——手機拍的原圖、相機的原始檔都可以。壓過的圖無法還原
2. Logo 提供向量原始檔——不是從舊網站另存的小圖。詳見Logo 與向量檔
3. 去背圖用 PNG 提供，不要存成 JPG
4. 檔名取有意義的名稱——這會影響搜尋，見圖片的替代文字與檔名

格式轉換、尺寸調整、壓縮，都由網站端處理即可。您負責提供品質最好的原始素材。