AVIF 图片格式实战：网站图片减少 70%、提升性能指标

AVIF 图片格式实战：网站图片减少 70%、提升性能指标 | 前端进阶之旅

Full translation

完整中文译文

现代网站依赖大量图片，但图片也是页面加载缓慢的最主要原因之一。

在优化一个项目时，我决定用 AVIF 替换传统的 JPG 和 PNG 文件。结果出人意料地好。

以下是我学到的。

AVIF（AV1 Image File Format）是一种基于 AV1 视频编码的现代图像格式。

与 JPG 和 PNG 等传统格式相比，AVIF 提供了显著更好的压缩率，同时保持了优秀的视觉质量。

对于许多网站来说，切换到 AVIF 可以根据内容将图像大小减少 40-70%。

我的网站包含数百张图片。

即使压缩了 JPG 文件后，页面速度仍然可以提高。

我想要一个能够做到以下几点的格式：

AVIF 满足了所有要求。

以下是我观察到的改进。

虽然结果因图像而异，但 AVIF 始终比 JPG 和 PNG 提供了更好的压缩率。

现代浏览器已经支持 AVIF，包括：

这使 AVIF 成为现代网站的实用选择。

转换一张图片很容易。

手动转换数百张图片则不然。

为了简化这个工作流程，我构建了一个基于浏览器的工具，可以一次性将多张图片转换为 AVIF。

转换直接在浏览器中运行，使批量优化变得快速和简单。

如果你想要一份完整的指南，解释 AVIF、浏览器兼容性、压缩技术、SEO 益处和最佳实践，我也写了一篇详细的文章：

AVIF 不是每种图像格式的替代品，但对于专注于性能的网站来说，它正在成为最佳选择之一。

如果你在研究网络性能、SEO 或 Core Web Vitals，AVIF 绝对值得测试。

你已经在生产环境中开始使用 AVIF 了吗？