接續前面分享的網站效能評測工具分享，我們可以得到一些數據與解決項目，其中影響網站效能的關鍵往往都在於圖片的數量與大小，理想的狀態下當然希望圖片愈小愈好，可還需要兼顧品質的呈現，除了我們常見的JPG、PNG 之外，還有一種新的圖片檔案格式在網站中開始慢慢開始取代他們囉！而且更快？更小？那就是 —— WebP！️

 

我們針對每個人情況的不同，推薦三個你可以使用的 WebP 轉檔工具：

WebP Converter —— Apple Store APP
TinyImage Compressor —— Figma Plugin
Convert.io —— 線上轉檔工具

 

WebP 是什麼？

一種同時提供了有損壓縮與無失真壓縮的圖片檔案格式。 截至 2021 年 5 月，已有 94% 的瀏覽器支援此格式， 2020 年 9 月，在 iOS 14 和 macOS Big Sur 的 Safari 14 中加入了 WebP 支援。

優點：大部分情況 WebP 的大小要比 JPEG、PNG 小 25-40%

• 有些特殊情況轉換成 WebP 格式檔案大小反而會變大
• 例： JPG 轉 Webp 的 100% 無失真格式
• 在過去網站使用動態圖片，只能靠 GIF ，但現在 WebP 也可以提供動態圖示的部份功能
• 轉換後的 WebP 支持 Alpha 透明和 24-bit 色彩，不存在 PNG8 在色彩不夠豐富和在瀏覽器中可能會出現毛邊的問題

缺點：常見的圖像處理工具無法識別 WebP

• 大多數軟體不能輸出 WebP 的檔案格式（如Adobe Photoshop）
• WebP 格式圖像輸出後不能再編輯，需要原檔編輯後重新輸出成.webp
• WordPress 所製作的網站，無法直接上傳 webP 圖檔（5.8 後的版本 OK）

整體來說

1. WebP 格式適合用於照片、影像類，如果是向量圖、Icon 的使用還是以 SVG 為主
2. 在網站的架設過程中需要多一道轉檔的手續
3. 另外， WebP 如果跑不出來也需要注意解決載入順序

​

WebP Converter —— Apple Store APP

• 無限制批量轉檔
• 支持 PNG、JPG、GIF、PDF、TIFF、EPS 和 PSD
• 不需要網路連接

TinyImage Compressor —— Figma Plugin

• 直接在 Figma 內壓縮出圖，省去導出後還要去第三方網站壓圖的時間
• 可選擇壓縮品質

Convert.io —— 線上轉檔工具

• 無檔案數量限制
• 單個檔案最大不超過 100MB