選擇正確的壓縮等級

Ilya Grigorik
Ilya Grigorik
X 首頁
Jeremy Wagner

圖片通常佔據網頁上下載的大部分位元組，也經常佔據大量視覺空間。因此，最佳化圖片通常可為網站節省最多的位元組，並提升效能：瀏覽器下載的位元組越少，用戶端的頻寬競爭就越少，瀏覽器就能更快下載並在螢幕上顯示實用的內容。

圖片最佳化既是藝術，也是一門科學：一門藝術，因為要如何壓縮個別圖片，並沒有絕對的答案和科學，因為有許多技術和演算法已開發得宜，可以大幅縮減圖片尺寸。您必須仔細分析多個面向，才能為圖片找到最佳設定：格式功能、編碼資料內容、品質、像素尺寸等等。

最佳化向量圖片

所有新型瀏覽器都支援可縮放向量圖形 (SVG)，這是一種以 XML 為基礎的二維圖形圖片格式。您可以直接在頁面上嵌入 SVG 標記，也可以將其做為外部資源。大多數以向量為基礎的繪圖軟體都能建立 SVG 檔案，您也可以直接在喜愛的文字編輯器中手動編寫。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

上方範例會算繪下方簡單的圓形形狀，並套用黑色輪廓和紅色背景，且是從 Adobe Illustrator 匯出。

<?xml version="1.0" encoding="utf-8"?>

您可以看到，這類檔案包含許多中繼資料，例如圖層資訊、註解和 XML 命名空間，這些資訊通常不必在瀏覽器中算繪資產。因此，建議您透過 SVGO 等工具執行 SVG 檔案，以便縮減檔案大小。

舉例來說，SVGO 將 Illustrator 產生的上述 SVG 檔案大小縮減了 58%，從 470 位元組縮減到 199 位元組。

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

由於 SVG 是 XML 格式，所以您也可以套用 GZIP 壓縮來縮減傳輸大小。請確保您的伺服器設定為壓縮 SVG 資產！

光柵圖片是由個別「像素」構成的 2D 格線。舉例來說，100 x 100 像素的圖片是 10,000 個像素序列。每個像素都會儲存「RGBA」值：(R) 紅色通道、(G) 綠色通道、(B) 藍色管道和 (A) Alpha 通道。

瀏覽器在內部會為每個管道分配 256 個值 (形狀)，每個管道會轉譯為 8 位元 (2 ^ 8 = 256)，每個像素 4 位元組 (4 通道 x 8 位元 = 32 位元 = 4 位元組)。因此，如果我們知道格線的尺寸，就可以輕鬆計算出檔案大小：

  • 100 x 100 像素的圖片由 10,000 個像素組成
  • 10,000 像素 x 4 位元組 = 40,000 位元組
  • 40,000 位元組 / 1024 = 39 KB
尺寸 像素 檔案大小
100 x 100 10,000 39 KB
200 x 200 40,000 156 KB
300 x 300 90,000 351 KB
500 x 500 250,000 977 KB
800 x 800 640,000 2500 KB

100 x 100 像素圖片的檔案大小為 39 KB，這似乎不算太大，但對於較大的圖片，檔案大小會迅速增加，導致圖片資產下載速度變慢且成本高昂。這篇文章目前只著重於「未壓縮」圖片格式。好消息是，您可以採取許多做法來縮減圖片檔案大小。

其中一種簡單的策略是將圖片的「位元深度」從每個聲道 8 位元縮減為較小的調色盤：每個聲道 8 位元可為每個聲道提供 256 個值，總共 16,777,216 (256 ^ 3) 色。如果將調色盤縮減為 256 色，會發生什麼情況？這樣一來，RGB 管道只需要總共 8 位元，而且每個像素可立即節省 2 個位元組，相較於原始的每像素 4 位元格式，可節省 50% 的壓縮空間！

壓縮成果
從左到右 (PNG)：32 位元 (1600 萬色)、7 位元 (128 色)、5 位元 (32 色)。

進行漸變色彩轉換 (例如漸層或天空) 的複雜場景時，需要更大的調色盤，才能避免 5 位元資產中的像素化天空等視覺構件。另一方面，如果圖片只使用幾種顏色，則大型調色盤就只是在浪費寶貴的位元！

接下來，在您將儲存在個別像素中的資料最佳化後，您可以更聰明地查看附近的像素：事實上，許多圖片 (尤其是相片) 都有許多相似顏色的相鄰像素，例如天空、重複的紋理等等。利用這項資訊善加利用壓縮器可套用差異編碼，讓您不用儲存每個像素的個別值，就能儲存鄰近像素之間的差異。如果相鄰的像素相同，差異值就會是「零」，而且只需儲存一個位元！但不只這樣。

人眼對不同顏色的敏感度不同：您可以減少或增加這些顏色的調色盤，以便針對此情況最佳化顏色編碼。「附近」像素會形成二維格線。也就是說，每個像素都有多個相鄰像素：您可以利用這項事實進一步改善差異編碼。您可以查看鄰近像素的較大區塊，並以不同的設定編碼不同的區塊，而非只查看每個像素的鄰近像素。

如您所見，圖片最佳化很快就會變得複雜 (或有趣，視您的觀點而定)，也是學術和商業研究的熱門領域。圖片會佔用大量位元組，開發更好的圖片壓縮技術有很多好處！如想進一步瞭解相關資訊，請前往 Wikipedia 頁面，或參閱 WebP 壓縮技術白皮書，查看實際操作範例。

再次強調，這一切都很棒，但也非常學術化：這項功能如何協助您在網站上最佳化圖片？不過，請務必瞭解問題的形狀：RGBA 像素、位元深度和各種最佳化技術。在深入探討各種光柵圖片格式之前，請務必瞭解並牢記所有這些概念。

無損與有損圖片壓縮

對於特定類型的資料，例如網頁的原始碼或執行檔，壓縮工具必須確保壓縮器不會變更或遺失任何原始資訊：只要有一塊遺失或錯誤的資料，就可能完全改變檔案內容的含意，甚至完全破壞檔案。對於圖片、音訊和影片等其他類型的資料，您可以提供原始資料的「近似」表示方式。

事實上，由於人眼的運作方式，我們通常可以捨棄每個像素的部分資訊，藉此縮減圖片檔案大小。舉例來說，人眼對不同顏色的敏感度不同，因此我們可以使用較少位元編碼部分顏色。因此，一般圖片最佳化管道包含兩個高階步驟：

  1. 圖片處理時會套用光面濾鏡，去除部分像素資料。
  2. 圖片會透過無損濾鏡處理，以便壓縮像素資料。

第一個步驟是選用步驟，具體的演算法取決於特定圖片格式，但請務必瞭解，任何圖片都可能經過有損壓縮步驟來縮減大小。事實上，GIF、PNG、JPEG 等不同圖片格式的差異，在於應用有損和無損步驟時，所使用的 (或省略的) 特定演算法組合。

那麼，有損和無損最佳化功能的「最佳」設定為何？答案取決於圖片內容和您自己的標準，例如在可接受的檔案大小與經過有損壓縮處理後產生的瑕疵之間取得平衡： 在某些情況下，您可能會略過有損最佳化，以便完整呈現精細細節。在其他情況下，您可以採用積極的失真最佳化方式，縮減圖片素材資源的檔案大小。這時您得發揮自己的判斷力和背景脈絡，這並沒有一套通用設定。

舉例而言，使用 JPEG 等失真格式時，壓縮工具通常會顯示可自訂的「畫質」設定 (例如 Adobe Photoshop 的「Save for Web」功能提供的品質滑桿)，這通常是介於 1 到 100 之間的數字，用來控制特定一組有損和無損演算法的內部工作。為獲得最佳效果，請嘗試為圖片設定各種品質，並放心降低品質，因為視覺效果通常都很好，而且檔案大小可以節省相當大的空間。

圖片壓縮對 Core Web Vitals 的影響

由於圖片通常是最大內容繪製的候選項目，因此減少圖片的資源載入時間，不論是在實驗室或實際環境，都能改善 LCP。

嘗試對光柵圖片格式壓縮設定時，請務必測試 WebP 和 AVIF 格式，瞭解相較於舊版格式，能否透過較小規模提交相同的圖片。

不過，請注意不要overcompress點陣圖。理想的解決方案是使用圖片最佳化 CDN 來找出最適合的壓縮設定，但另一種替代方法是使用 Butteraugli 等工具估算影像差異，以免圖片過度「」編碼而失去過多品質。

圖片最佳化檢查清單

調整圖片時，請牢記下列訣竅和技巧：

  • 盡量使用向量格式：向量圖片不受解析度和縮放比例的影響，因此非常適合多裝置和高解析度的世界。
  • 縮減及壓縮 SVG 素材資源：大多數繪圖應用程式產生的 XML 標記通常含有可移除的非必要中繼資料；請確認您的伺服器已設定為對 SVG 素材資源套用 GZIP 壓縮。
  • 優先使用 WebP 或 AVIF，而非舊版光柵格式：WebP 和 AVIF 圖片通常比舊版圖片格式小得多。
  • 選擇最佳的光柵圖片格式：請先確定功能需求，然後選取適合每個特定資產的格式。
  • 嘗試使用最佳的點陣圖格式品質設定：請放心調低「品質」設定，結果通常會非常好，而且可節省大量位元組。
  • 移除不必要的圖片中繼資料：許多光柵圖片都包含不必要的素材資源中繼資料：地理資訊、相機資訊等。使用適當的工具移除這類資料。
  • 提供經過縮放的圖片： 調整圖片大小，並確保「顯示」大小盡可能接近圖片的「自然」大小。請特別留意大型圖片，因為在調整大小時，這些圖片會佔用最多空間！
  • 自動化、自動化、自動化：投資自動化工具和基礎架構，確保所有圖片素材資源都能保持最佳化。