網頁上大部分的下載位元組通常都在圖片內,而且通常也佔據了大量的視覺空間。因此,將圖片最佳化通常可以節省大量位元組,並提升網站效能:瀏覽器需要下載的位元組數越少,用戶端頻寬的競爭就越少,瀏覽器下載並在螢幕上呈現實用內容的速度就越快。
圖片最佳化既是藝術,也是一門科學:一門藝術,因為要如何壓縮個別圖片,並沒有絕對的答案和科學,因為有許多技術和演算法已開發得宜,可以大幅縮減圖片尺寸。如要找出圖片的最佳設定,需要仔細分析許多維度:格式功能、編碼資料的內容、品質、像素尺寸等。
最佳化向量圖片
所有新式瀏覽器都支援可擴充向量圖形 (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%!
![壓縮構件](https://web.developers.google.cn/static/articles/compress-images/image/compression-artifacts-0440f2089a09b.png?authuser=3&hl=zh-tw)
進行漸變色彩轉換 (例如漸層或天空) 的複雜場景時,需要更大的調色盤,才能避免 5 位元資產中的像素化天空等視覺構件。另一方面,如果圖片只使用幾種顏色,則大型調色盤就只是在浪費寶貴的位元!
接下來,只要您將儲存在個別像素中的資料最佳化,就能更聰明、查看鄰近像素,例如:光面、許多圖片,尤其是相片的鄰近像素,例如天空、重複的紋理等。利用這項資訊善加利用壓縮器可套用差異編碼,讓您不用儲存每個像素的個別值,就能儲存鄰近像素之間的差異。如果相鄰的像素相同,差異值就會是「零」,而且只需儲存一個位元!但為什麼要停下來...
人眼對不同顏色的靈敏度不同:您可以透過減少或增加這些顏色的調色盤,將色彩編碼最佳化。「附近」像素會形成 2D 格線,這表示每個像素都有多個相鄰值:您可以利用此情況進一步改善 Delta 編碼。與其只觀察每個像素的立即鄰點,您可查看鄰近像素的較大區塊,並使用不同設定來編碼不同區塊。
如您所知,圖片最佳化過程非常快速 (或很有趣,視您自己的觀點而定),是學術和商業研究領域中的積極領域。圖片會佔用大量位元組,開發更好的圖片壓縮技術有很多好處!如要瞭解詳情,請前往 Wikipedia 頁面,或參閱 WebP 壓縮技術白皮書取得實作範例。
再次提醒您,這固然是件好事,但也非常學術性: 它如何協助您最佳化網站上的圖片? 不過,請務必瞭解問題的形狀:RGBA 像素、位元深度和各種最佳化技術。深入探討各種光柵圖片格式前,請務必瞭解並牢記上述所有概念。
無損與有損圖片壓縮
對於特定類型的資料,例如網頁的原始碼或執行檔,壓縮工具必須確保壓縮器不會變更或遺失任何原始資訊:只要有一塊遺失或錯誤的資料,就可能完全改變檔案內容的含意,甚至完全破壞檔案。對於圖片、音訊和影片等其他資料類型,呈現原始資料的「近似」表示法可能是可以接受的。
事實上,由於眼睛的運作方式,為減少圖片的檔案大小,我們往往會捨棄每個像素的相關資訊,以減少圖片的檔案大小。舉例來說,我們的眼睛對不同顏色的靈敏度不同,這意味著我們可以使用較少位元來編碼某些顏色。因此,典型的圖片最佳化管道包含兩個高階步驟:
- 圖片處理時會套用光面濾鏡,去除部分像素資料。
- 系統會使用壓縮像素資料的「無損」濾鏡處理圖片。
第一個步驟是選用步驟,確切的演算法將依附於特定圖片格式,但請務必瞭解,任何圖片都會經歷失真壓縮步驟來縮減大小。事實上,在套用有損和無損步驟時,各種圖片格式 (例如 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 圖片通常比舊的圖片格式小得多。
- 選擇最佳光柵圖片格式:確定功能需求,並選取適合每個特定資產的格式。
- 實驗找出光柵格式的最佳品質設定:請大膽降低「品質」設定,結果通常非常好,節省的位元組會很可觀。
- 移除不必要的圖片中繼資料:許多光柵圖片包含不必要的資產中繼資料,例如地理資訊、相機資訊等。請使用適當的工具刪除這些資料。
- 提供經過調整的圖片: 調整圖片大小,確保「顯示」大小盡可能接近圖片的「自然」大小。請特別留意大型圖片,因為調整圖片大小時,這類圖片通常會負起最大的負荷!
- 自動化、自動化、自動化:投資自動化工具和基礎架構,確保所有圖片素材資源一定會經過最佳化調整。