又在看這個...WebP。Google 的東西。 聽說對網站速度跟 SEO 有好處。 到底是真的還是噱頭... 來筆記一下。
重點一句話
簡單說，WebP 就是一種圖片格式，目標是在維持跟 JPG、PNG 差不多的畫質下，把檔案變得更小。 檔案小，網站載入就快，使用者體驗好，Google 也可能因此給你的網站好一點的分數。
真的有差很多？直接看數據
光說不練沒意思。我之前也懷疑過，所以自己拿了幾張圖來壓壓看。拿 Google 自家的 Squoosh 工具來試很方便，圖片不會上傳，在本機處理。
實驗了一下，同樣一張照片，JPG 檔可能要 250KB，轉成 WebP 之後，畫質幾乎分不出來，檔案大小可以壓到 100KB 以下。PNG 圖檔如果要透明背景，檔案更大，但 WebP 也可以支援透明背景，檔案一樣小很多。 這對都是圖片的網站... 比如作品集或電商，速度提升會很明顯。
速度快，除了使用者不會等到不耐煩跑掉之外，對 SEO 也是有間接幫助的。Google 一直強調網頁體驗，載入速度是其中一個重點。 這也算是符合 E-E-A-T 裡面，提供良好「體驗」(Experience) 的一部分吧，雖然 E-E-A-T 主要是講內容的經驗。
那... 怎麼把圖片換成 WebP？
以前很麻煩，現在簡單多了。很多線上工具都能用，上傳 JPG 或 PNG，就能下載回 WebP 檔案。 像是 Squoosh 或是 AnyWebP 這種都很多人用。 如果是 WordPress 網站，現在很多圖片優化外掛也都會自動幫你轉檔跟提供 WebP 格式。
一個要注意的點是「向下相容」。雖然現在絕大部分的主流瀏覽器都支援 WebP 了，但總有些舊的裝置或非主流瀏覽器不行。 所以最保險的做法是用 `
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="這是圖片的描述">
</picture>
上面這段碼就是那個意思。看得懂 WebP 的瀏覽器，會優先載入 `image.webp`。看不懂的，就會去抓 `image.jpg` 來用。很穩。
和其他格式的比較... 還有 AVIF？
WebP 不是終點。現在還有一個叫 AVIF 的格式，壓縮率好像又更高。 不過支援度跟工具鏈就沒有 WebP 這麼成熟了。
做個簡單的比較表，給自己參考：
| 格式 | 檔案大小 | 畫質 | 支援度 | 個人筆記 |
|---|---|---|---|---|
| JPEG | 普通，算基準點。 | 有損壓縮，重複存檔會變差。 | 萬用，100% 支援。 | 老朋友了，沒什麼好說的。照片夠用。 |
| PNG | 通常偏大。 | 無損壓縮，畫質好。 | 萬用，100% 支援。 | 需要透明背景的時候才會想到它。不然真的太大。 |
| WebP | 小很多。比 JPEG 小 25-34% 很常見。 | 肉眼幾乎看不出差異。 | 很高。除了 IE 那種骨董... | 目前的最佳解。平衡性最好。速度跟品質兼顧。 |
| AVIF | 又更小，潛力股。 | 高壓縮下，細節保留得比 WebP 好。 | 越來越好，但還沒普及。 | 可以開始玩玩看，但主力放 WebP 比較穩。尤其要注意舊 iPhone 的支援性。 |
一些要注意的坑
聽起來很美好，但還是有幾件事要注意。
- 舊系統支援：有些老舊的後台系統、App 可能不認得 WebP。上傳圖片可能會失敗。這要先確認。
- 轉換品質：用工具轉檔時，品質參數不是越低越好。壓得太過頭，圖片會有很醜的色塊跟模糊。自己要拉動比較一下，找到一個平衡點。
- 工作流程改變：如果設計師習慣用 Photoshop，舊版的 PS 預設不支援 WebP，需要另外裝外掛。 這會改變整個團隊的工作習慣，需要溝通。
總結來說，WebP 值得用。對網站載入速度和使用者體驗的提升是實實在在的，而且對 SEO 有正面影響。 雖然有下一代格式 AVIF 追趕在後，但目前 WebP 的生態系成熟，是現階段最實用、最平衡的選擇。
聊了這麼多，那你自己的網站呢？你現在主要用哪種圖片格式？有考慮換成 WebP 或 AVIF 嗎？在下面留言分享一下你的想法吧。
