开启 AVIF 时代：优化图像以提升网页性能

2024-01-08 03:35:05

众所周知，一图胜千言，图片对于视觉的冲击效果远大于文字。然而，对于我们的互联网而言，传输和解析一张图片的代价要远比“千言”大的多得多（目前上亿像素已经成为主流）。面对动辄 10 多 M 的大型图片，使用优化的图像来节省带宽和加载时间无疑是性能优化中的重头戏，无论对于用户还是公司都…

AVIF：下一代图像格式

传统图片格式如 JPEG 和 PNG 虽然有着广泛的应用，但它们也存在着一些局限性。JPEG 虽然支持有损压缩，但其压缩程度和图像质量之间往往存在权衡。PNG 虽然支持无损压缩，但其文件体积较大，对于一些对文件大小敏感的应用场景并不适用。

AVIF（AV1 Image File Format）是一种新型图像格式，它基于谷歌开发的开源视频编解码器 AV1。AVIF 融合了 JPEG 的有损压缩和 PNG 的无损压缩优势，在保持高图像质量的同时，可以大幅减少文件体积。

AVIF 的优势

文件体积更小： 与 JPEG 和 PNG 相比，AVIF 图像的体积可以减少多达 50% 至 75%。这意味着更快的加载速度和更低的带宽消耗。
更好的图像质量： AVIF 支持更高的颜色深度和更丰富的色彩空间，在压缩过程中可以保留更多图像细节。与 JPEG 相比，AVIF 图像在相同文件体积下可以提供更好的视觉质量。
支持透明度： 与 PNG 类似，AVIF 也支持透明度，这使其非常适用于包含半透明或透明元素的图像。
广泛的浏览器兼容性： AVIF 得到 Chrome、Firefox 和 Safari 等主流浏览器的广泛支持，这意味着它可以被大多数用户访问。

启用 AVIF

要启用 AVIF，您需要采取以下步骤：

确保您的服务器支持 AVIF。
将您的图像转换为 AVIF 格式。可以使用 ImageMagick 或其他图像转换工具来完成此操作。
在您的 HTML 代码中使用<picture>元素来提供 AVIF 图像。

示例代码：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.png" alt="Image">
</picture>

通过使用此代码，浏览器将加载最适合用户设备和连接的图像格式。

结论

AVIF 作为下一代图像格式，提供了优化图像以提升网页性能的巨大潜力。通过减少文件体积和保持图像质量，AVIF 可以帮助您的网站加载更快、消耗更少的带宽，从而为用户提供更好的体验。因此，如果您正在寻找一种方法来提升您的网站性能，那么迁移到 AVIF 是值得考虑的。