Web开发人员Avif图片指南

AVIF（AV1图像文件格式）是一种通常比其他流行替代品更好的免版税图像格式（JPEG，PNG，WEPP）。使用Chrome 85+和Firefox 86+（在功能标志后面）浏览器支持越来越好，所以现在值得在网页上包括Avif图像。

在下文中，使用JPEG，WEPP和AVIF编码了相同的图像（如果可以＆＃39; t查看所有三个图像，您的浏览器可能不支持某种格式）：

较小的文件大小意味着更快的加载时间，这提高了整体用户体验。

Google＆＃39; s squoosh web应用程序是一个伟大的操场，足以处理单个图像。您可以使用压缩设置播放并将输出与其他格式进行比较。

Squoosh也可作为CLI工具提供，这是频繁使用和批处理的替代方案：

在此示例中，squoosh将创建一个牛.avif文件。由于当前版本0.6.3，无法更改输出文件名。

低速参数将使转换更慢，但文件大小将较小。那个＆＃39;折磨我很高兴。

ImageMagick是我通常选择作为全面的图像处理CLI工具。自版本7.0.25以来，它本地支持Avif压缩。但是，除了质量，我无法找到设置速度/努力参数的任何选项。这意味着输出比i＆＃39更大; d喜欢它。

截至4月2021年，WPP全球使用率为〜93％，Avif为〜63％。幸运的是，有一个向后兼容的功能，用于为不支持的浏览器提供回退：

在此示例中，浏览器将与从上到下的格式匹配，并使用第一个支持的格式。 Avif被列为第一个格式，因为它提供了最佳压缩。

如果浏览器没有支持＆lt;图片＆gt;所有（i＆＃39; m看起来，IE11），所有＆lt;来源＆gt;条目将被忽略，jpeg＆lt; img＆gt;图片将被用作回力。这是渐进式增强的完美典范。

但是如何告诉您，浏览器选择哪些引用的图片图像显示？

浏览器独立的方式是在DOM检查器中选择IMG元素，并在控制台中键入以下内容：

在Chrome DevTools中，当您悬停IMG元素的SRC或SRCSet值时，还会显示此信息：

此页面上的屏幕截图包括多种图像类型，因此请自己尝试。 🔎 加入Twitter或Mastodon的讨论。 随意给我送电子邮件。 💌