總結

1. 一種圖片格式

---

一、什么是 WebP？

WebP（發音為 “weppy”）是由 Google 推出的一種現代圖片格式，支持有損壓縮和無損壓縮，旨在提供更小的文件體積和更高質量的圖像顯示。

它兼容常見的圖片功能，如：

• 透明通道（Alpha 通道）
• 動畫支持（類似 GIF）
• 有損壓縮（類似 JPEG）
• 無損壓縮（類似 PNG）

---

二、WebP 的優勢

對比維度	JPEG/PNG	WebP
文件體積	較大	更小（有損小 25%~34%，無損小 26%）
透明支持	PNG 支持	支持 Alpha 通道
動畫支持	GIF/PNG	支持，比 GIF 更小更清晰
壓縮效率	一般	更高，壓縮率更好
瀏覽器兼容性	高	現代瀏覽器廣泛支持（IE 不支持）

---

三、WebP 的使用場景

場景	說明
網站圖片優化	替換傳統 JPEG/PNG 圖片，減小頁面體積
移動端優化	減少圖片加載時間，節省流量
電商網站、圖庫類應用	高清小體積圖片提升用戶體驗
SEO 優化	頁面加載速度提升有助于 SEO 排名

---

四、如何使用 WebP？

1. HTML 中使用

<img src="image.webp" alt="WebP 圖片" />

2. CSS 中使用

.background {background-image: url("image.webp");
}

3. 提供多格式回退（兼容不支持 WebP 的瀏覽器）

<picture><source srcset="image.webp" type="image/webp" /><img src="image.jpg" alt="圖片描述" />
</picture>

---

五、如何生成 WebP 圖片？

你可以使用以下工具將 PNG/JPEG 轉換為 WebP：

1. 使用命令行工具 cwebp

cwebp -q 80 image.jpg -o image.webp

2. 使用在線轉換工具

• CloudConvert
• OnlineConvert
• TinyPNG WebP 轉換

3. 使用構建工具自動化轉換

• Webpack：使用 imagemin-webp 插件
• Vite：通過 vite-plugin-imagemin 插件壓縮并轉換圖片

---

六、瀏覽器兼容性

瀏覽器	是否支持
Chrome	? 支持（自 Chrome 23 起）
Firefox	? 支持（自 Firefox 65 起）
Safari	? 支持（自 Safari 14 起）
Edge	? 支持
iOS / Android	? 支持（現代設備）
IE	? 不支持

---

七、總結

特性	說明
格式類型	有損/無損壓縮、支持透明、動畫
優勢	更小體積、更高質量、更好壓縮率
使用方式	<img>、<picture>、CSS、構建工具
推薦場景	圖片優化、移動端、SEO 提升
注意事項	需要轉換工具，IE 不支持，建議提供回退方案

---