選擇正確的壓縮等級

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" encode="utf-8"?>

如您所知，其中含有許多中繼資料，例如圖層資訊、註解和 XML 命名空間，在瀏覽器中算繪資產時經常非必要。因此，建議您運用 SVGO 等工具，壓縮 SVG 檔案。

舉例來說，SVGO 將上述 SVG 檔案 (由 Illustrator 產生) 縮減 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

100x100 像素的圖片看起來可能不太一樣，但檔案大小應該是 39 KB，但因為較大的圖片會很快地爆炸，會使圖片素材資源下載速度慢且成本高昂。這篇文章目前只著重在「未壓縮」的圖片格式。 幸好，有很多方法可以縮減圖片檔大小。

其中一種簡單的策略是將圖片的「位元深度」從每個聲道 8 位元縮減為較小的調色盤：每個聲道 8 位元為每個聲道 256 個值，總共 16,777,216 (256 ^ 3) 色。如果將調色盤降到 256 色，會怎麼樣？ 那麼，RGB 管道總共只需要 8 位元，就能立即讓每個像素節省 2 位元組，相較於原始的 4 個位元組，壓縮可省下 50%！

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

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

接下來，只要您將儲存在個別像素中的資料最佳化，就能更聰明、查看鄰近像素，例如：光面、許多圖片，尤其是相片的鄰近像素，例如天空、重複的紋理等。利用這項資訊善加利用壓縮器可套用差異編碼，讓您不用儲存每個像素的個別值，就能儲存鄰近像素之間的差異。如果相鄰的像素相同，差異值就會是「零」，而且只需儲存一個位元！但為什麼要停下來...

人眼對不同顏色的靈敏度不同：您可以透過減少或增加這些顏色的調色盤，將色彩編碼最佳化。「附近」像素會形成 2D 格線，這表示每個像素都有多個相鄰值：您可以利用此情況進一步改善 Delta 編碼。與其只觀察每個像素的立即鄰點，您可查看鄰近像素的較大區塊，並使用不同設定來編碼不同區塊。

如您所知，圖片最佳化過程非常快速 (或很有趣，視您自己的觀點而定)，是學術和商業研究領域中的積極領域。圖片會佔用大量位元組，開發更好的圖片壓縮技術有很多好處！如要瞭解詳情，請前往 Wikipedia 頁面，或參閱 WebP 壓縮技術白皮書取得實作範例。

再次提醒您，這固然是件好事，但也非常學術性： 它如何協助您最佳化網站上的圖片？ 不過，請務必瞭解問題的形狀：RGBA 像素、位元深度和各種最佳化技術。深入探討各種光柵圖片格式前，請務必瞭解並牢記上述所有概念。

無損與有損圖片壓縮

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

事實上，由於眼睛的運作方式，為減少圖片的檔案大小，我們往往會捨棄每個像素的相關資訊，以減少圖片的檔案大小。舉例來說，我們的眼睛對不同顏色的靈敏度不同，這意味著我們可以使用較少位元來編碼某些顏色。因此，典型的圖片最佳化管道包含兩個高階步驟：

  1. 圖片處理時會套用光面濾鏡，去除部分像素資料。
  2. 系統會使用壓縮像素資料的「無損」濾鏡處理圖片。

第一個步驟是選用步驟，確切的演算法將依附於特定圖片格式，但請務必瞭解，任何圖片都會經歷失真壓縮步驟來縮減大小。事實上，在套用有損和無損步驟時，各種圖片格式 (例如 GIF、PNG、JPEG 等) 之間的差異，會由他們使用 (或省略) 的特定演算法組合而成。

那麼，什麼是有損和無損最佳化的「最佳」設定呢？ 答案取決於圖片內容，以及您的條件，例如檔案大小與因失真壓縮而產生的成果之間的取捨： 在某些情況下，您可能會想要略過失真最佳化，以完整呈現複雜的細節。在其他情況下，您或許可以套用積極失真的最佳化功能，縮減圖片素材資源的檔案大小。 這時您得發揮自己的判斷力和背景脈絡，這並沒有一套通用設定。

舉例而言，使用 JPEG 等失真格式時，壓縮工具通常會顯示可自訂的「畫質」設定 (例如 Adobe Photoshop 的「Save for Web」功能提供的品質滑桿)，這通常是介於 1 到 100 之間的數字，用來控制特定一組有損和無損演算法的內部工作。為獲得最佳結果，請對圖片的各種品質設定進行實驗，並別害怕降低畫質；圖片生成結果通常非常好，縮減檔案大小可能會相當大。

圖片壓縮對 Core Web Vitals 的影響

圖片通常適合使用「Largest Contentful Paint」，因此在研究室和欄位中，縮短圖片資源載入時間即可轉化成更好的 LCP。

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

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

圖片最佳化檢查清單

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

  • 偏好向量格式：向量圖片的解析度較高，且可獨立縮放，因此非常適合用於多種裝置和高解析度環境。
  • 壓縮及壓縮 SVG 資產：大多數繪圖應用程式產生的 XML 標記通常包含不必要的中繼資料，可以移除；請確保伺服器設定為對 SVG 資產套用 GZIP 壓縮。
  • 優先使用 WebP 或 AVIF，而非舊版光柵格式：WebP 和 AVIF 圖片通常比舊的圖片格式小得多。
  • 選擇最佳光柵圖片格式：確定功能需求，並選取適合每個特定資產的格式。
  • 實驗找出光柵格式的最佳品質設定：請大膽降低「品質」設定，結果通常非常好，節省的位元組會很可觀。
  • 移除不必要的圖片中繼資料：許多光柵圖片包含不必要的資產中繼資料，例如地理資訊、相機資訊等。請使用適當的工具刪除這些資料。
  • 提供經過調整的圖片： 調整圖片大小，確保「顯示」大小盡可能接近圖片的「自然」大小。請特別留意大型圖片，因為調整圖片大小時，這類圖片通常會負起最大的負荷！
  • 自動化、自動化、自動化：投資自動化工具和基礎架構，確保所有圖片素材資源一定會經過最佳化調整。