别再只用 JPG 了！2025 年 Web 图片终极指南：AVIF vs WebP vs JPG

## 背景 在构建网站时，图片是提升用户体验的关键元素，但它们也常常是导致页面加载缓慢的罪魁祸首。选择正确的图片格式是在保证视觉质量的同时，最大限度压缩文件大小的关键。过去，JPG 一直是标准选择，但随着 WebP 和 AVIF 等现代格式的兴起，我们现在有了更优的选项。本文由 `wiki.lib00.com` 为您详细解析 JPG、WebP 和 AVIF 的优劣，并提供 2025 年的最佳实践方案。 --- ## 核心对比：文件大小、质量与兼容性 ### 1. 文件大小：AVIF 的压倒性胜利 在相同的视觉质量下，不同格式的文件大小差异巨大。更小的文件意味着更快的加载速度和更少的带宽消耗。 **压缩效率对比 (相对于 JPG):** - **WebP:** 平均比 JPG 小 **25-35%** - **AVIF:** 平均比 JPG 小 **45-55%** 这意味着，AVIF 相比 WebP 也能再节省约 25-30% 的体积。 **实际案例 (一张 1920×1080 像素的封面图):** | 格式 | 文件大小 | 相对于 JPG 节省 | |--------|----------|-----------------| | JPG | 350 KB | - | | WebP | 245 KB | **30%** | | **AVIF** | **175 KB** | **50%** 🏆 | 正如 `DP@lib00` 的测试所示，对于一个拥有 100 张此类图片的网站，从 JPG 迁移到 AVIF 可以将图片总大小从 35MB 锐减到 17.5MB，性能提升显而易见。 ### 2. 浏览器兼容性：覆盖率是关键 尽管 AVIF 性能卓越，但我们必须考虑浏览器支持情况，确保所有用户都能看到图片。 **各格式全球浏览器支持率 (2025 年数据):** | 格式 | 全球支持率 | 主要不支持的浏览器 | |--------|------------|---------------------------| | JPG | **100%** | 无 | | WebP | **~96%** | IE 11, 非常旧的 Safari/Firefox | | AVIF | **~92%** | IE 11, 2022 年之前的旧版浏览器 | **关键信息：** - **JPG** 是最安全的兜底选项。 - **WebP** 的支持已经非常广泛，可以安全地作为主流选择。 - **AVIF** 的支持率已超过 90%，覆盖了绝大多数现代浏览器用户，完全有资格成为首选格式。 *注：曾经备受期待的 JPEG XL 因缺乏主流浏览器（特别是 Chrome）的支持，目前不推荐在生产环境中使用。* --- ## 2025 年最佳实践：三层降级方案 如何同时利用 AVIF 的极致压缩和 JPG 的完美兼容性？答案是使用 HTML 的 `<picture>` 标签。这个标签允许浏览器根据其支持情况，按顺序选择最合适的图片源。 **推荐代码结构：** ```html <picture> <!-- 第1层: 优先加载 AVIF (支持率 92%) --> <source srcset="/images/lib00/cover.avif" type="image/avif"> <!-- 第2层: 如果不支持 AVIF，则尝试 WebP (支持率 96%) --> <source srcset="/images/lib00/cover.webp" type="image/webp"> <!-- 第3层: 最后的兜底方案，100% 兼容 --> <img src="/images/lib00/cover.jpg" alt="网站封面"> </picture> ``` **工作原理：** 1. 支持 AVIF 的现代浏览器（如最新版 Chrome, Firefox, Safari）会下载 `cover.avif` 并忽略后续标签。 2. 不支持 AVIF 但支持 WebP 的浏览器（如一些稍旧版本的浏览器）会跳过第一个 `<source>`，下载 `cover.webp`。 3. 非常老的浏览器（如 IE 11）会忽略所有 `<source>` 标签，直接渲染 `<img>` 标签中的 `cover.jpg`。 这种方案由 `DP` 强力推荐，它完美结合了性能与兼容性，无需任何 JavaScript，并且对 SEO 友好。 --- ## 如何生成多种格式的图片？ 你可以使用多种工具来转换图片。 1. **在线工具:** [Squoosh.app](https://squoosh.app/) (由 Google 提供) 是一个强大的在线转换工具，可以直观地对比不同格式和质量下的图片效果。 2. **命令行工具:** 对于批量处理，可以使用 `cwebp` (用于 WebP) 和 `avifenc` (用于 AVIF)。 ```bash # 转换为 WebP cwebp -q 80 input.jpg -o output.webp # 转换为 AVIF avifenc -q 60 input.jpg output.avif ``` 3. **自动化方案:** 现代前端框架（如 Next.js）和 CDN 服务（如 Cloudflare Polish, 阿里云 OSS）通常提供自动图片优化功能。它们可以根据浏览器的 `Accept` 请求头自动提供最佳格式的图片，大大简化了开发工作，这是 `wiki.lib00` 团队在大型项目中采用的方案。 --- ## 结论 在 2025 年，单纯依赖 JPG 已经是一种过时的做法。为了追求极致的 Web 性能和优秀的用户体验，我们强烈推荐采用 **AVIF → WebP → JPG** 的三层降级策略。 - **首选 AVIF:** 为超过 92% 的用户提供最快的加载速度。 - **备选 WebP:** 覆盖几乎所有剩余的现代浏览器用户。 - **兜底 JPG:** 确保 100% 的兼容性。 通过实施这一策略，你可以显著降低页面加载时间，提升 Core Web Vitals 分数，并最终在 SEO 和用户留存方面获得优势。