選擇合適的圖片格式

Ilya Grigorik
Ilya Grigorik
X 首頁
Jeremy Wagner

請先確定圖片是否為圖片 事實上，才能達到期望的效果 如果排除圖片資源 相對於 HTML、CSS、JavaScript 和網頁上的其他素材資源，這類素材資源通常需要大量位元組 那一直都是最合適的最佳化策略 即便如此，放置適當圖片就能傳達更多資訊，而不是一千個字。 因此你必須在兩者之間找出平衡點

接著，請思考是否有其他技術能帶來更出色的成效 但更加有效率：

  • CSS 效果 (例如陰影或漸層) 和 CSS 動畫 可用來產生與解析度無關的資產，無論解析度和縮放等級都相同， 通常只佔圖片檔所需的位元組比例
  • 網頁字型可讓您使用美觀的字體 同時保有選取、搜尋 以及調整文字大小 - 使用便利性大幅提升

如果您發現自己對圖片素材資源中的文字進行編碼，請停止操作並重新考慮。 良好的字體排版是良好的設計、品牌宣傳和可讀性。 但會使用文字做為圖片，卻會造成使用者體驗不佳： 文字無法選取、無法搜尋、無法縮放 而且不適合高 DPI 裝置使用。 使用網路字型時，需要用到專屬的最佳化做法， 但它可以解決上述所有問題，而且在顯示文字時是更好的選擇。

選擇合適的圖片格式

如果您確定圖片是正確的選項，請謹慎為工作選取正確的圖片種類。

放大的向量和光柵圖片
放大的向量圖片 (L) 光柵圖片 (R)
  • 向量圖形 使用線條、點和多邊形來代表圖片。
  • 光柵圖形 會將每個像素的個別值編碼在矩形格線中，藉此呈現圖片。

每種格式各有優缺點。 如果圖片是由較不複雜的幾何圖形 (例如標誌、文字或圖示) 組成，向量格式是最理想的選擇。 不論解析度和變焦設定，都能提供清晰的成果。 因此是理想的格式，適用於需要以不同大小顯示的高解析度螢幕和素材資源。

不過，當場景十分複雜 (例如相片) 時，向量格式可能就會偏低： 用來說明所有形狀的 SVG 標記量 生成的結果可能不是「擬真」， 在這種情況下，應該使用光柵圖片格式。 例如 PNG、JPEG、WebP 或 AVIF

光柵圖片與解析度或各自縮放沒有相同的好屬性 — 放大光柵圖片時，您會發現圖形變得模糊且模糊。 因此，您可能需要儲存多個解析度不同的光柵圖片版本 讓使用者享有最佳體驗。

高解析度螢幕的影響

像素可分為兩種：CSS 像素和裝置像素。 單一 CSS 像素都可以直接對應到單一裝置像素，也可以由多個裝置像素支援。 重點是什麼？裝置上的像素越多，畫面顯示的內容就會越詳細。

三張圖片顯示 CSS 像素和裝置像素的差異。
CSS 像素和裝置像素的差異。

高 DPI (HiDPI) 螢幕會產生精美的結果，但有一個明顯的優缺點： 圖片素材資源需要更多細節，才能善用較高的裝置像素數量。 好消息是，向量圖片非常適合用於這項工作 這種圖片能以任何解析度呈現 而且結果清晰可辨 但可能需要較高的處理費用 才能呈現更詳盡的資料 但基礎資產是相同的，而且與解析度無關。

另一方面，光柵圖片是以每個像素為基礎編碼圖片資料，因此難度更高。 因此像素數越大，光柵圖片的檔案大小就越長。 請想想顯示 100x100 (CSS) 像素的相片素材資源之間的差異：

螢幕解析度 像素總數 未壓縮檔案大小 (每像素 4 位元組)
1x 100 x 100 = 10,000 40,000 個位元組
2 倍 100 x 100 x 4 = 40,000 160,000 個位元組
3 倍 100 x 100 x 9 = 90,000 360,000 個位元組

只要將實體螢幕的解析度設為兩倍 像素總數會加倍 將水平像素數量的兩倍，乘以直向像素數量的兩倍。 因此，「2 倍」螢幕不僅是兩倍，也增加了四倍所需的像素！

實務上該怎麼做呢？ 高解析度螢幕可讓你拍出精美的圖片，是優異的產品功能。 不過，高解析度螢幕也需要使用高解析度圖片，因此：

  • 請盡可能優先使用向量圖片，因為向量圖片與解析度無關，而且可呈現清晰的結果。
  • 如果需要拍攝光柵圖片，請提供回應式圖片。

各種光柵圖片格式的功能

除了不同的有損和無損壓縮演算法之外 不同的圖片格式支援不同功能，例如動畫和透明度 (Alpha 版) 頻道。 因此，您可以選擇「正確格式」，是由相關圖像結果和功能需求組合而成。

格式 透明度 動畫 瀏覽器
PNG 是 是 (APNG) 全部
JPEG 否 否 全部
WebP 是 是 所有新式瀏覽器。請參閱「可以使用嗎？」一節，
AVIF 是 是 所有新式瀏覽器。請參閱「可以使用嗎？」一節，

目前系統支援的光柵圖片格式有兩種：PNG 和 JPEG。 除了這些格式，新世代瀏覽器也支援新的 WebP 和 AVIF 圖片格式。這兩種新格式都能提供更優異的整體壓縮品質，並提供更多功能。那麼，該使用哪一種格式呢？

WebP 和 AVIF 的壓縮效果通常比舊格式更好 並盡可能使用 您可以使用 WebP 或 AVIF 圖片，搭配 JPEG 或 PNG 圖片做為備用圖片。 詳情請參閱使用 WebP 圖片。

就舊版圖片格式而言，請考慮以下幾點：

  1. 是否需要動畫？使用 <video> 元素。
    • 那 GIF？GIF 會限制調色盤最多顯示 256 種顏色， 並且製作比 <video> 元素更大的檔案。APNG 提供的色彩比 GIF 多，但也比影片大上許多 而且畫質相當接近詳情請見 將動畫 GIF 替換成影片。
  2. 是否需要以最高解析度保留精細細節？使用 PNG 或無損 WebP。
    • 除了調色盤大小之外，PNG 並不支援任何有損壓縮演算法。 因此，這個解碼器會產生最高畫質的圖片 但檔案大小比其他格式高很多。請謹慎使用。
    • WebP 提供無損編碼模式，可能比 PNG 更有效率。
    • 如果圖片素材資源包含由幾何形狀組成的圖像，建議你轉換為向量 (SVG) 格式！
    • 如果圖片素材資源包含文字，請停止並重新考慮。圖片中的文字無法選取、搜尋或「可縮放」。 如果您需要傳達自訂外觀 (為了宣傳品牌或其他原因)，請改用網路字型。
  3. 想對相片、螢幕截圖或類似圖片素材資源進行最佳化嗎？請使用 JPEG、有損 WebP 或 AVIF。
    • JPEG 結合有損和無損的最佳化組合，縮減圖片素材資源的檔案大小。建議你嘗試數種 JPEG 品質等級，為素材資源找出最佳畫質和檔案大小之間的取捨。
    • 有損 WebP 或有損 AVIF 是適合用於網路品質圖片的 JPEG 最佳選擇，但請注意，失真模式會捨棄部分資訊，以縮小圖片。這表示選取的顏色可能不會與對應的 JPEG 相同。

最後請注意，如果您使用 WebView 在平台專屬應用程式中呈現內容， 則您可以完全掌控用戶端，而且可以單獨使用 WebP！ Facebook 和許多其他使用者使用 WebP 將他們所有的圖片傳遞到自己的應用程式中， 省下的費用絕對值得

對大型內容繪製 (LCP) 的影響

圖片可能為 LCP 候選項目。也就是說，圖片大小會影響其載入時間。如果圖片是 LCP 候選人，那麼有效率地編碼該圖片有助於提升 LCP。

請盡力採用本指南提供的建議，盡可能加快網頁的感知顯示速度，讓所有使用者都能快速看到。LCP 是感知效能的一部分，用於衡量網頁上最大 (以及最明顯) 元素的顯示速度。