使用方法
- 將 WebP 檔案拖到上傳區域，點選選擇檔案，或貼上圖片，PNG 和 JPEG 檔案同樣可以。
- 如需從其他格式生成 WebP，把目標格式設為 WebP 並調整品質。
- 可選擇設定最大寬度，然後對比原始大小和編碼後大小。
- 複製或下載 Data URI、純 Base64、HTML img 標籤、CSS background-image 或 Markdown。
什麼是 WebP？
WebP 是 Google 於 2010 年推出的圖片格式，集成了基於 VP8 影片編碼的有失真壓縮、獨立的無損模式、Alpha 透明通道和動畫。它的 MIME 型別是 image/webp，由於檔案採用 RIFF 容器，Base64 輸出總以 UklGR 開頭。據 Google 公佈的資料，無損 WebP 比 PNG 小約 26%，有損 WebP 在相近畫質下比 JPEG 小 25% 到 34%。
為什麼 WebP 適合做 Data URI
Base64 會讓每個檔案都多出三分之一，所以原始檔越小，字串越短。這正是 WebP 的優勢：帶透明背景的 PNG 圖示轉換為 WebP 後仍保留透明度，體積通常更小；JPEG 照片在相近畫質下也會變小。品質設得過高時，結果可能比最佳化過的原圖還大，複製前請先確認編碼後大小。
動態 WebP 在保持原格式編碼時會保留全部幀；轉換格式或縮放尺寸則只會重新渲染其中一幀。
瀏覽器和郵件客戶端支援
所有主流瀏覽器的當前版本都能顯示 WebP，包括 Chrome、Edge、Firefox、Opera 以及 Safari 14 及以上版本，只有 Internet Explorer 等很老的瀏覽器不支援。郵件則不同：包括 Windows 版 Outlook 在內的一些桌面郵件客戶端無法顯示 WebP，郵件模板中請改用 PNG 或 JPEG。
用 JavaScript 生成 WebP Data URI
// 讀取使用者選擇的檔案
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// 以 80% 品質把 canvas 重新編碼為 WebP
const uri = canvas.toDataURL('image/webp', 0.8);如果瀏覽器不支援編碼 WebP，toDataURL 會悄悄改為輸出 PNG，因此請確認結果以 data:image/webp 開頭。
常見問題
可以在這裡把 PNG 或 JPEG 轉成 WebP Base64 嗎？
可以。載入圖片後把目標格式設為 WebP 並設定品質即可。轉換使用瀏覽器內建的編碼器，結果以 data:image/webp 形式輸出。
Base64 會保留 WebP 動畫嗎？
會。只要不選擇轉換、也不設定最大寬度，Base64 字串就是包含全部幀的原始檔案。
所有瀏覽器都能顯示 data:image/webp 圖片嗎？
Chrome、Edge、Firefox、Opera 和 Safari 的當前版本都可以。Internet Explorer 和 14 以前的 Safari 不支援。