網頁中大部分下載的位元組，圖片通常會計入圖片，而且通常會佔用大量的視覺空間。因此，最佳化圖片通常可以節省大量的位元組，並改善網站效能：瀏覽器需要下載的位元組數越少，用戶端頻寬的競爭越少，瀏覽器下載及在畫面上顯示實用內容的速度就越快。
圖片最佳化既是藝術，也是科學。藝術是一門藝術，因為對於如何壓縮個別圖片，沒有絕對的答案，還有科學，因為市面上有許多開發完善的技術和演算法，可以大幅降低圖片大小。如要找出圖片的最佳設定，您需要仔細分析許多維度：格式功能、編碼資料的內容、品質、像素維度等。
最佳化向量圖片
所有新版瀏覽器都支援可擴充向量圖形 (SVG)，這是 2D 圖形的 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"coding="utf-8"?>
如您所知，這個目錄包含許多中繼資料，例如圖層資訊、註解和 XML 命名空間，這些中繼資料一般不需要在瀏覽器中顯示素材資源。因此，建議您透過 SVGO 等工具執行壓縮 SVG 檔案。
基本上，SVGO 的 SVG 檔案是 Illustrator 產生的 SVG 檔案，而大小從 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 資產！
光柵圖片就是個別「像素」的二維格線。舉例來說，100x100 像素的圖片是 10,000 像素的序列。如此一來，每個像素就會儲存「RGBA」值：(R) 紅色通道、(G) 綠色通道、(B) 藍色通道，以及 (A) 透明度 (A) 管道。
瀏覽器會在內部為每個管道分配 256 個值 (陰影)，此值會轉譯為每個管道 8 位元 (2 ^ 8 = 256)，每個像素 4 個位元組 (4 個聲道 x 8 位元 = 32 位元 = 4 個位元組)。因此，如果我們知道網格的尺寸，即可輕鬆計算檔案大小：
- 100x100 像素的圖片包含 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% 的壓縮！
如果是會逐漸調色 (例如漸層或天空) 的複雜場景，需要更大的調色盤，以免 5 位元素材資源中有像素化的天空等視覺失真。另一方面，如果圖片只使用幾種顏色，那麼大型調色盤就是在浪費寶貴的細節！
接下來，將個別像素儲存的資料最佳化後，就能更聰明，也可以查看鄰近的像素：關閉，許多圖片，特別是相片，附近有許多顏色相近的像素，例如天空、重複紋理等。只要利用這項資訊，壓縮工具就能套用「差異編碼」，在不儲存每個像素的個別值的情況下，您可以儲存鄰近像素之間的差異：如果相鄰的像素相同，差異值就會是「零」，您只需儲存一個位元！但不只這樣...
人眼對於不同顏色的靈敏度不同：您可以增減這些顏色的調色盤，藉此最佳化色彩編碼。「附近」像素會形成 2D 格線。這表示每個像素都有多個鄰點：您可以使用這項資訊進一步改善差異編碼。您可以查看鄰近像素的大型區塊，並對不同區塊進行不同設定編碼，而不只是查看每個像素的近似鄰點。
如您所知，圖片最佳化作業很快就會變得複雜 (視您的觀點而定)，也相當有趣，而且目前也相當積極用於學術和商業研究。圖片佔用大量位元組，因此在開發更優質的圖片壓縮技術方面具有許多價值！如果您有興趣瞭解詳情，請前往 Wikipedia 頁面，或參閱 WebP 壓縮技術白皮書中的實作範例。
所以再次提醒您，這些功能固然很好，但也非常學術性： 該如何協助您最佳化網站上的圖片？ 請務必瞭解問題型態：RGBA 像素、位元深度和各種最佳化技巧。開始討論各種光柵圖片格式前，請務必瞭解並牢記這些概念。
無損與有損圖片壓縮
對於特定類型的資料 (例如網頁的原始碼或可執行的檔案)，壓縮程式不會變更或遺失任何原始資訊：因為只要資料一小塊遺失或錯誤，就可能會完全改變檔案內容的意義，甚至完全破壞。以圖片、音訊和影片等其他類型的資料來說，提供原始資料的「概略」表示結果是可以接受的。
事實上，由於視角的運作原理，我們經常捨棄每個像素的部分資訊，藉此縮減圖片大小，例如視眼睛對不同顏色的敏感度不同，這表示我們可以使用較少的位元來為部分色彩編碼。因此，一般的圖片最佳化管道包含兩個高階步驟：
- 以「高失」濾鏡處理圖片，可去除部分像素資料。
- 系統會使用壓縮像素資料，透過「無損」篩選器處理圖片。
第一個步驟是選用步驟，確切的演算法取決於特定的圖片格式，但重要的是必須瞭解所有圖片都會經歷失真壓縮步驟，才能縮小圖片尺寸。事實上，在套用失真和無損步驟時，GIF、PNG、JPEG 等各種圖片格式之間的差異，取決於這些格式使用 (或省略) 的特定演算法。
那麼，在有損和無損最佳化的情況下，哪種「最佳」設定呢？ 答案取決於圖片內容以及您自己的標準，例如檔案大小與有損壓縮所產生的構件之間的取捨：在某些情況下，您可能想要略過有損最佳化程序，直接傳達複雜的細節。在其他情況下，您可以進行大幅失真的最佳化，縮減圖片素材資源的檔案大小。在這個階段，你需要運用自己的判斷和背景脈絡，沒有人適用的通用設定。
以實際操作為例，使用 JPEG 等有損格式時，壓縮工具通常會提供可自訂的「品質」設定 (例如 Adobe Photoshop 中的「Save for Web」功能提供的品質滑桿)，這個數值通常介於 1 到 100 之間，控制有損和無損演算法的內部運作。為獲得最佳效果，請嘗試測試各種圖片品質設定，但不要害怕降低畫質。視覺結果通常很不錯，且可節省大量檔案大小。
圖片壓縮功能對網站體驗核心指標的影響
由於圖片通常是「最大內容繪製」的候選項目，因此縮短圖片的資源載入時間，能同時在研究室和現場中轉化成良好的 LCP。
處理光柵圖片格式的壓縮設定時，請務必嘗試運用 WebP 和 AVIF 格式，看看是否能與舊格式相比，以少許空間提供相同圖片。
但要小心不要「過度壓縮」光柵圖片。理想的解決方式是使用圖片最佳化 CDN，找出最適合的壓縮設定，但您也可以使用 Butteraugli 等工具預估視覺差異，避免圖片「過度」過度編碼，品質也就下降。
圖片最佳化檢查清單
最佳化圖片時，請牢記以下幾個訣竅和技巧：
- 偏好向量格式：向量圖片是可獨立解析度的，且可縮放比例，因此非常適合用於多種裝置和高解析度的世界。
- 壓縮及壓縮 SVG 資產：大多數繪圖應用程式產生的 XML 標記通常含有可移除的非必要中繼資料；請確保伺服器已設為針對 SVG 資產套用 GZIP 壓縮。
- 優先使用 WebP 或 AVIF，而非舊版光柵格式：WebP 和 AVIF 圖片通常比舊版圖片格式還小。
- 選擇最佳光柵圖片格式：確定功能要求，並選取適合每個特定資產的適當格式。
- 實驗找出光柵格式的最佳品質設定：請小心地降低「品質」設定，結果通常非常好，節省的位元組可能會很可觀。
- 移除不必要的圖片中繼資料：許多光柵圖片包含不必要的資產中繼資料：地理資訊、相機資訊等。請使用適當的工具刪除這些資料。
- 提供縮小的圖片： 調整圖片大小，確保「顯示」大小盡可能接近圖片的「自然」大小。 請特別留意大型圖片，因為調整後會佔用最大的額外負荷！
- 自動化、自動化、自動化：請投入自動化工具和基礎架構，確保所有圖片素材資源都會隨時進行最佳化。