網頁圖片格式 WebP、jpg、png、svg、gif…等，選哪種好?

多種圖片格式讓你眼花撩亂? 這篇為你介紹各種格式的差異。

圖片檔案大小、數量會影響網站載入速度。圖片越多、檔案越大，網站會因為要載入這些圖片，而較慢呈現出網頁內容。

Google指出，若網頁沒有在 3 秒內載入，將近一半的使用者很有可能會直接離開。

所以圖片如何在網頁上檔案小又能清楚呈現，就是圖片在輸出格式上要注意的囉!
下面先簡易介紹，網頁圖片、印刷圖片的輸出差異。

網頁圖片:

• 螢幕解析度 (RGB)，通常用 72 dpi 即可。
  但有時候放圖片上去還是會糊糊的，那就把圖片 dpi 、品質或是尺寸往上調高後輸出，直到圖片放在網頁上清晰為止。
• 同一區塊、系列的圖片，最好是尺寸、留白的部分一致為佳。這樣放圖在網頁上才不會顯得突兀。

印刷圖片:

• 印刷解析度 (CMYK)，至少 300 dpi。
• 圖片皆要嵌入、文字外框。
• 預留出血線。每家印刷店規定出血線不同大小，要印前可先詢問店家。

---

jpg

使用時機: 適合照片、 一般無透明圖片

• 網路媒體型式(MIME): image/jpeg
• 靜態影像格式/ 非向量/ 無透明。
• 最高可到 24 位元全彩影像。
• 使用失真壓縮，圖片品質可根據壓縮的設定而有所不同。
• jpg 較適合照片壓縮，文字一經壓縮容易糊掉。

png

使用時機: 適合 logo、icon、需透明的圖片。

• 網路媒體型式(MIME): image/png
• 靜態影像格式/ 非向量/ 保留透明。
• 最高可到 64 位元全彩影像。
• 無失真壓縮點陣圖格式，相對於 jpg、gif、svg 檔案會較為大。

gif

使用時機: 適合動態圖。

• 網路媒體型式(MIME): image/gif
• 動態影像格式/ 非向量/ 保留透明。
• 最高可到 8 位元(256色) 全彩影像。
• 支援動畫圖像，對全彩圖片進行失真壓縮。使用多禎可以提高顏色準確度。

svg

使用時機: 適合 logo、icon、需多種尺寸的圖片。

• 網路媒體型式(MIME): image/svg+xml
• 靜態影像格式/ 向量 (不失真)。
• 一個基於 XML 的向量圖格式。
• 檔案小、不論縮放多少皆不失真，也可以用程式碼繪製出圖形。
• 適合當網頁圖片，只是經驗上程式碼要寫完整才能在 safari 上呈現。
  例如: 給 width、height、viwebox 的值 (不是 auto)，才能呈現。

<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <path d="M60......"></path>
</svg>

WebP

使用時機: 最推薦，適合 logo、icon、需多種尺寸的圖片。

• 網路媒體型式(MIME): image/webp
• 靜態影像格式/ 非向量/ 保留透明。
• 最高可到 20 位元全彩影像。
• 提供了失真壓縮與無失真壓縮 (可逆壓縮) 的圖片檔案格式。
• 截至 2022 年 1 月，已有 94% 的瀏覽器支援此格式。比其他格式可減少高達 28~45%的檔案大小。

---

結論

• Google 測試網站速度工具，在分析中也推薦網頁使用 WebP 格式。 因為檔案小很多也支援透明。
  • 有繪圖軟體就繪圖軟體轉檔，而線上轉檔圖片可來這裡: aconvert 。
    • 如果是 WordPress 可下載圖片優化外掛: EWWW Image Optimizer，點我有 WordPress 外掛介紹。