技术原理（概览）
WebP 是由 Google 推出的现代图像格式，结合了有损和无损编码技术，以减少文件大小同时保持图像质量。它的有损模式基于 VP8 视频编码的变体，使用变换、量化与熵编码来达到高压缩比；无损模式则采用了预测、字典编码与熵编码的组合以保留像素细节。
- 有损（Lossy）：基于帧内图像变换（类似 VP8），适合照片与复杂图像。
- 无损（Lossless）：使用像素预测与字典压缩，适合图标、截图与需要完全保真的场景。
- 透明度（Alpha）：WebP 支持有损与无损下的 alpha 通道（透明），在保持小体积的同时支持透明背景。
- 动画（Animated WebP）：支持多帧动画，可作为 GIF 的更轻量替代方案，帧间可使用帧差压缩。
在实际部署中，建议对照片使用有损 WebP（以平衡质量与体积），对图标和需要透明背景的素材使用无损或支持 alpha 的 WebP。
支持情况与实践建议
绝大多数现代浏览器（Chromium 系列、Firefox、Safari 的较新版本）和主流服务器/图像处理库都已支持 WebP。但部分老旧浏览器或特殊平台可能不支持，因此需要前端做兼容性处理。
兼容性实践（示例）
- 使用
<picture>标签提供 WebP 与降级格式（JPEG/PNG）。 - 对 CSS 背景图可通过服务器端或构建时生成多格式并在 runtime 中切换（User-Agent 或 modern image support 检测）。
- 对于动画，优先使用 Animated WebP；对不支持的环境提供 GIF 或 MP4fallback（视场景而定）。
示例：使用 <picture> 的优雅降级
<picture>
<source srcset="/images/example.webp" type="image/webp">
<img src="/images/example.jpg" alt="示例图片" class="w-full h-auto rounded">
</picture>上例中支持 webp 的浏览器会优先加载 WebP，不支持的会回退到 JPG，从而实现兼容性与性能的平衡。