選擇合適的圖片格式

第一個問題是,您應思考圖片是否為達到預期效果所需的圖片。好的設計十分簡單,且必定能取得最佳效能。 如果您可以去除圖片資源,這通常需要大量的位元組和 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 個位元組

當我們將實體螢幕的解析度加倍時,像素總數會增加四倍:水平像素數量的兩倍,乘以垂直像素的兩倍。因此,「2x」的螢幕不僅會增加兩倍,所需的像素數量也高達四倍!

但實際上這是什麼意思呢? 高解析度螢幕可讓您放送精美的圖片,是絕佳的產品功能。 但是,高解析度螢幕也需要使用高解析度圖片,因此:

  • 請盡可能優先使用向量圖片,因為這類圖片不會因解析度而異,且會持續呈現清晰效果。
  • 如果需要光柵圖片,請提供回應式圖片

各種光柵圖片格式的功能

除了不同的有損和無損壓縮演算法外,不同的圖片格式還能支援不同的功能,例如動畫和透明度 (Alpha 版) 管道。因此,選擇「適當格式」的圖片就是所需的視覺結果和功能要求。

形式 資訊公開 動畫 瀏覽者
PNG 全部
JPEG 全部
WebP 所有新式瀏覽器。請參閱我可以使用嗎?
AVIF 否。詳情請參閱可以使用嗎?

廣受支援的光柵圖片格式有兩種:PNG 和 JPEG。除了這些格式之外,新世代瀏覽器也支援較新的 WebP 格式,但部分瀏覽器僅支援較新的 AVIF 格式。兩種新格式提供更好的整體壓縮和更多功能。那麼,你應該使用哪一種格式?

WebP 和 AVIF 通常提供比舊格式更好的壓縮效果,請盡可能使用。您可以將 WebP 或 AVIF 圖片與 JPEG 或 PNG 圖片搭配使用。詳情請參閱使用 WebP 圖片

以舊圖片格式來說,考量的重點如下:

  1. 需要動畫嗎?使用 <video> 元素。
    • 那 GIF 就好嗎?GIF 可將調色盤限制在最多 256 種顏色,而且建立的檔案大小遠大於 <video> 元素。請參閱「將 GIF 動畫換成影片」。
  2. 是否需要以最高解析度保留細節?使用 PNG 或無損 WebP。
    • PNG 不會套用調色盤大小選擇以外的任何有損壓縮演算法。因此可以產生最高畫質的圖片,但檔案大小遠高於其他格式。請謹慎使用。
    • WebP 具有無損編碼模式,使用起來可能比 PNG 更有效率。
    • 如果圖片素材資源包含由幾何圖形組成的圖像,請考慮轉換為向量 (SVG) 格式!
    • 如果圖片素材資源含有文字,請停止修改後再考慮。您無法選取、搜尋或「可縮放」圖片中的文字。 如果您需要傳達自訂外觀 (基於品牌宣傳或其他原因),請改用網頁字型。
  3. 您要對相片、螢幕截圖或類似的圖片素材資源進行最佳化調整嗎?使用 JPEG、有損的 WebP 或有損的 AVIF。
    • JPEG 會結合有損和無損的最佳化組合,來縮減圖片素材資源的檔案大小。嘗試多種 JPEG 品質等級,找出最佳的素材資源品質,以及最佳檔案大小的取捨。
    • 有損的 WebP 或有損 AVIF 可能是可接受的 JPEG 替代方案,但請注意,WebP 的失真模式會捨棄某些色域資訊,以產生較小的圖像。這表示所選顏色不一定會與對等的 JPEG 相同。

最後,請注意,如果您使用 WebView 在平台專用應用程式中算繪內容,則您擁有完整的用戶端控制權,而且只能使用 WebP!Facebook 和許多其他人都使用 WebP 在應用程式中傳送所有圖片,省下的費用絕對值得。

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

圖片可為 LCP 候選項目。這表示圖片大小會影響載入時間。如果圖片是 LCP 候選圖片,有效編碼該圖片是改善 LCP 的關鍵。

請盡可能依循本文提供的建議,盡可能加快網頁的感知效能,讓所有使用者都能以最快的速度存取。LCP 是感知效能的一部分,是根據網頁最大 (也就是最被察覺) 元素的顯示速度加以評估。