WebP 图片兼容性回退 · Picture 标签生成器

WebP 是 Google 开发的现代图片格式，相比 JPG/PNG 可减少 25%-35% 的文件体积，同时保持同等的视觉质量。WebP 支持有损压缩、无损压缩、透明通道和动画。

尽管主流浏览器（Chrome、Firefox、Safari、Edge）均已支持 WebP，但仍有部分旧版浏览器（如 IE 全系列、Android 4.x 原生浏览器）无法识别 WebP。<picture> 标签允许开发者指定多个 <source>，浏览器按顺序选择第一个支持的格式加载，从而实现优雅降级——支持 WebP 的浏览器加载更小的 WebP 文件，不支持的则自动回退到 JPG/PNG。

完全没有负面影响。Google、Bing 等主流搜索引擎都能正确解析 <picture> 标签。搜索引擎会读取 <img> 标签（回退元素）的 src 和 alt 属性来进行图片索引。实际上，使用 WebP 可以提升页面加载速度，而页面速度是 Google 排名因素之一，因此正确使用 picture + WebP 反而有助于 SEO。

关键点：始终为 <img> 标签填写准确的 alt 文本，这是搜索引擎理解图片内容的主要依据。

• 在线工具：Squoosh、CloudConvert、Convertio、TinyPNG（支持 WebP 导出）
• 命令行工具：Google 官方的 cwebp（cwebp input.jpg -o output.webp -q 80）
• 构建工具集成：Webpack 的 imagemin-webp 插件、Vite 的 vite-plugin-imagemin
• 图像处理库：Sharp（Node.js）、Pillow（Python）、ImageMagick
• CDN 自动转换：Cloudinary、Imgix、Cloudflare Image Resizing 可在 URL 参数中指定格式自动转换

非常重要。浏览器会从上到下遍历 <source> 标签，选择第一个满足条件（type 匹配 && media 匹配）的源。因此：

1. 最优先的格式（如 WebP）放在最前面
2. 次优格式（如 JPEG 2000）放在中间
3. 不需要 <source> 的回退格式由 <img> 标签处理

如果顺序错误，浏览器可能跳过更优的格式而加载体积更大的版本。

截至 2025 年，WebP 的全球浏览器支持率已超过 97%。但对于面向企业客户、政府机构、医疗、金融等领域的网站，仍可能有用户使用旧版浏览器。如果你的网站流量中有 IE 用户或旧版移动设备用户，回退机制仍然是必要的。

此外，一些邮件客户端（如 Outlook 桌面版）也不支持 WebP，如果图片需要在邮件中展示，回退方案很重要。使用 <picture> 标签实现回退几乎没有额外成本，却能保证100%的用户都能看到图片。

• AVIF：比 WebP 压缩率更高（可再减小 20-30%），Chrome 85+、Firefox 93+、Safari 16+ 已支持，是 WebP 的有力继任者
• JPEG XL：兼顾压缩率和兼容性，但目前浏览器支持有限（需标志位开启），前景不明朗
• HEIC/HEIF：Apple 生态广泛使用，但浏览器支持有限，主要在 iOS/macOS 原生环境
• PNG：需要无损透明时仍是首选，WebP 无损模式也可替代

建议策略：WebP 作为首选，AVIF 作为增强（通过额外的 source 标签），JPG/PNG 作为回退。