图片格式对比：WebP vs AVIF vs JPEG

为什么图片格式选择至关重要

图片通常占网页总大小的50-80%，是影响页面加载速度最重要的因素之一。选择正确的图片格式和适当的压缩设置，可以在保持视觉质量的同时大幅减小文件体积，直接改善Core Web Vitals指标（特别是LCP）。

三大现代图片格式详解

• JPEG：老牌格式，浏览器兼容性100%，适合照片类图片。缺点是不支持透明度，文件较大
• WebP：Google开发，相比JPEG文件体积小25-35%，支持透明度和动图，现代浏览器兼容性>95%。是目前最推荐的通用格式
• AVIF：最新一代格式，基于AV1视频编解码技术，压缩率比WebP还高20-50%，图像质量极佳。缺点是编码速度较慢，部分旧浏览器不支持（兼容性约85%）

图片格式选择策略

最佳实践是使用HTML的<picture>元素配合<source>，按格式优先级提供多个选项：

优先提供AVIF，次选WebP，最后回退到JPEG/PNG。现代浏览器会自动选择支持的最优格式。对于图标和简单图形，SVG格式无论如何缩放都保持清晰，是最佳选择。对于截图等精确图像，考虑使用PNG而非JPEG（PNG为无损格式）。

• 实际效果：同一张照片，JPEG约200KB，WebP约140KB，AVIF约90KB
• 工具推荐：Squoosh（在线工具）、Sharp（Node.js库）、ImageMagick（命令行）