圖片壓縮算法如何加快網頁載入速度？WebP、AVIF 與有損壓縮原理解析

最近，好像又開始在意網頁速度了

嗯...不知道為什麼，最近又開始在意起網頁的載入速度這件事。可能是在手機上開某個購物網站，等一張商品圖等得有點不耐煩吧。明明現在網路都很快了，但有時候還是會被一張大圖卡住，那種感覺真的很...微妙。😮‍💨

這就讓我想到圖片壓縮這件古老又重要的事。以前我們都在聊 JPEG、PNG，但現在好像全世界都在講 WebP 跟 AVIF。它們之所以能讓網頁變快，核心就在於「壓縮」這兩個字。尤其是一種叫做「有損壓縮」的技術，我自己是覺得，這個詞聽起來有點可怕，好像會失去什麼重要的東西一樣。

那個「有損壓縮」...到底犧牲了什麼？

說真的，與其說是「損失」，我更喜歡把它想像成...「講重點」。

你知道嗎，這有點像你在跟朋友轉述一部電影的劇情。你不會把每一句台詞、每一個鏡頭都鉅細靡遺地描述一遍，對吧？你會挑出關鍵的情節、人物的情緒轉折，然後把一些比較瑣碎的、不影響故事主軸的背景細節給省略掉。朋友聽完，還是能完全理解這部電影在演什麼，而且過程快多了。

有損壓縮做的事情，其實差不多就是這樣。它會分析圖片裡的資訊，然後很聰明地「決定」哪些細節是人眼不太容易注意到的。比如說，一大片藍天中非常細微的顏色漸層，或是照片裡某個角落的微小雜訊。它會把這些「次要資訊」拿掉或簡化，來換取檔案大小的大幅縮減。就跟你看電影摘要一樣，你失去了「完整體驗」，但得到了「核心資訊」跟「效率」。

所以，它犧牲的不是圖片的「可辨識度」，而是那些我們幾乎不會注意到的「像素級完美」。在大多數情況下，這筆交易，划算。尤其是在動輒幾 MB 的高畫質照片上，效果真的非常顯著。

WebP 跟 AVIF，現在要怎麼選？🤔

好了，那回到現在的主角：WebP 和 AVIF。這兩個都是為了取代老舊的 JPEG 和 PNG 而生的現代圖片格式。它們都用了更厲害的壓縮演算法，讓我們在「講重點」的時候，可以保留更多精彩的細節。

我自己是覺得，這兩個格式的選擇，有點像在挑交通工具。一個是已經非常普及、路線四通八達的高鐵（WebP），另一個是更快、更舒適但可能不是每個小站都停的磁浮列車（AVIF）。

我們直接來看個比較，可能會清楚一點：

比較項目	WebP (Google 的孩子)	AVIF (新世代的挑戰者)
壓縮能力	很不錯了，跟 JPEG 比簡直是不同次元。檔案大小通常能小個 30% 左右。	更猛...在畫質看起來差不多的情況下，檔案可以比 WebP 再小個 20-30%。真的很誇張。
畫質表現	大部分情況下都很好。但在極低的壓縮率下，有時候會感覺到一點色塊感或模糊。	我自己是覺得，它在極限壓縮下，對細節和顏色的保留能力更好。還有支援 HDR，這點蠻酷的。
瀏覽器支援度	基本上已經是「通用貨幣」了，幾乎所有主流瀏覽器都支援好幾年了。非常安全。	嗯...越來越好了，幾乎所有新版瀏覽器都支援了。連 Edge 都在 2024 年初跟上。但如果你要考慮到幾年前的舊裝置，可能還是要小心一點。
編碼/解碼速度	速度很快，無論是產生圖片還是瀏覽器顯示，都沒什麼負擔。	因為演算法比較複雜，壓縮跟解碼都需要多花一點點力氣。對伺服器和一些舊手機來說，可能會稍微吃力一點。
生態系與工具	非常成熟。各種繪圖軟體、線上工具、CMS 系統（像 WordPress）都內建支援了。	正在快速成長，但有時候還是會碰到一些平台（例如某些部落格服務或論壇）還不給上傳 AVIF 的情況。

從日本的一些技術文章來看，他們也觀察到類似的趨勢，雖然 AVIF 壓縮率很高，但在某些服務上還沒完全普及，所以很多人現階段還是會選擇比較穩定的 WebP 作為主力。

所以...我的專案到底該用哪個？

說了這麼多，我知道，大家最想問的還是「所以我到底該用哪個？」...這個問題，老實說，沒有標準答案。這完全取決於你的「在乎」。

你在乎的是什麼？是那極致的載入速度，還是那最後 1% 使用者的相容性？

如果你是個個人部落客，喜歡嘗試最新技術，想讓自己的網站酷到不行。那我覺得，直接用 AVIF 吧！然後設定一個 WebP 或 JPEG 作為備用選項（fallback），讓舊瀏覽器也能看到圖。
如果你在營運一個大型電商網站，每一筆訂單都很重要，穩定性壓倒一切。那或許，現階段以 WebP 為主，會是個更穩健、更沒有風險的選擇。畢竟，你不會想因為一張圖，失去任何一位潛在客戶。
對於大部分的企業官網或形象網站，我的建議是，可以開始導入 AVIF 了。搭配 `` 標籤，你可以讓現代瀏覽器載入超小的 AVIF，同時也為舊瀏覽器準備好 WebP 或 JPEG。這樣是兩全其美。

像 MDN Web Docs 這種指標性的技術文件網站，也詳細介紹了 AVIF 的優勢，認為它有潛力成為下一件大事，這也算是一種風向吧。