今天每个人都在谈论 AVIF，因为 Jake 的博客文章。正如他们所说，我今天才知道 AVIF 是一个东西。但是由于网络技术领先于游戏，我们现在就可以利用它。
如果您已经抽象了响应式图像语法，这将更容易。在使用 <picture> 的任何地方，您可以将其插入，这样支持的浏览器就可以获取它，而不支持的浏览器则不会获取它
<picture>
<!-- use if possible -->
<source type="image/avif" srcset="snow.avif">
<!-- fallback -->
<img alt="Hut in the snow" src="snow.jpg">
</picture>想现在就玩玩吗？Jake 更新了 Squoosh 来支持它。CodePen 也支持它。这里有一个 Pen（我从 Shaw 的原始 Pen 中分叉出来的）
查看那里的 Pug HTML 以便翻出其他来源。如果您放入的图像的 URL 托管在 CodePen 的资产托管 上，它将自动执行所有转换等操作。图像通过 一个 Cloudflare Worker 进行处理，它执行转换，并支持 AVIF。对于新图像，您可能会在对 AVIF 的第一次请求时感受到响应时间延迟，因为生成它们似乎需要更多工作。
像任何格式一样，它确实取决于图像的类型。在玩弄的时候，我将一个已经压缩的 JPG 作为源，AVIF 使其版本的尺寸增加了一倍多。因此，您必须注意不要通过使用它来使事物变慢。
到目前为止，我们一直使用新的图像格式很好。WebP 几乎总是最好的格式，因此大部分逻辑都走上了 if (webp_supported) { use_webp } 的道路。但现在，AVIF 不仅有时更小，它的压缩方式会导致不同的视觉效果，因此即使它更小，您可能也不满意它的外观。
我的理想场景始终是某种图像 CDN，使用 ?format=auto&quality=auto，它会自动选择最佳的格式和质量，永远不会使其比原始版本更差。但也要有可能覆盖，这样如果您对自动决定不满意，就可以修复它。我原本打算测试 Cloudinary 的自动格式化选择，但他们还没有支持它。我敢打赌他们很快就会支持，但我敢打赌要做到正确很复杂。