开发者的AVIF

开发者AVIF指南

在Web项目中实现AVIF的完整指南。

HTML实现

使用picture元素进行渐进式支持：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述" loading="lazy">
</picture>

CSS实现

使用@supports处理背景图像：

.hero {
  background-image: url('hero.jpg');
}
@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

构建工具

• Sharp: 用于图像转换的Node.js库
• Squoosh CLI: Google的图像优化CLI工具
• ImageMagick: 支持AVIF的多功能CLI工具

性能提示

• 始终对首屏以下的图像使用懒加载
• 使用srcset实现响应式图像
• 大多数情况下考虑60-80的质量
• 在各种设备和连接上测试