AVIF格式在前端项目中的实践与性能优化探索

为什么我开始用AVIF？效果真的香

说实话，最初我对AVIF这种新格式是持观望态度的。毕竟webp刚普及没多久，又来一个新玩意儿，谁愿意折腾啊。但最近几个项目实在被图片体积压得喘不过气，尤其是那些高清大图，动不动就几MB。没办法，硬着头皮试了下AVIF，结果真香。

简单说下数据：同样一张1920×1080的图片，jpg大概300KB，webp能压到150KB左右，而AVIF直接干到80KB，画质还几乎看不出区别。这压缩率，简直离谱。

我的写法，亲测靠谱

经过几个项目的实践，我现在基本固定了这样一套写法：

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

这套写法有几个关键点要注意：

• 一定要把AVIF放在最前面，浏览器会按顺序选择支持的第一个格式
• 必须带上jpg作为兜底方案，别指望所有浏览器都支持新格式
• alt属性必填，这是基本的职业操守

我一般还会加上loading=”lazy”，配合现代浏览器的懒加载特性：

<img src="image.jpg" alt="描述文字" loading="lazy">

这几种错误写法，别再踩坑了

说几个我见过的反面教材，真的看得我血压飙升：

首先是这种写法：

<img src="image.avif" onerror="this.src='image.jpg'">

看着好像挺聪明，实则问题多多。首先onerror事件在某些情况下可能不会触发，其次这种写法完全抛弃了不支持AVIF的用户，性能体验极差。

还有这种：

<picture>
  <img src="image.avif">
  <img src="image.jpg">
</picture>

这位仁兄可能是对picture标签有什么误解，这样写会导致两个图片都加载，完全背离了优化的初衷。

实际项目中的坑

第一个大坑就是兼容性问题。虽然Chrome和Firefox早就支持了，但Safari直到16.4版本才开始支持AVIF。所以千万别想着一刀切全站换AVIF，还是得走渐进增强的路子。

第二个坑是编码时间。AVIF的编码确实比其他格式慢一些，特别是在处理大量图片的时候。我一般是用sharp库批量处理：

const sharp = require('sharp');

sharp('input.jpg')
  .avif({ quality: 50 })
  .toFile('output.avif')
  .then(info => { console.log(info); })
  .catch(err => { console.log(err); });

这里建议quality设在40-60之间，太高了文件体积大，太低了画质损失明显。

第三个坑是CDN缓存。有些老的CDN服务可能不认AVIF的MIME类型，记得检查下响应头是不是image/avif。不是的话就得找运维同学加一下：

AddType image/avif .avif

一些小技巧分享

在实际项目中，我发现把AVIF和其他优化手段搭配使用效果更好。比如配合srcset做响应式：

<picture>
  <source srcset="large.avif 1920w, medium.avif 1280w, small.avif 640w" type="image/avif">
  <source srcset="large.webp 1920w, medium.webp 1280w, small.webp 640w" type="image/webp">
  <img src="large.jpg" alt="描述文字" sizes="(max-width: 640px) 100vw, 50vw">
</picture>

这样可以根据屏幕大小加载不同尺寸的图片，进一步优化加载速度。

还有个小细节，记得给服务器配上Brotli压缩。AVIF本身已经很高效了，再加一层压缩还能省点带宽：

# nginx配置示例
brotli on;
brotli_types image/avif;

结尾唠叨几句

以上是我使用AVIF过程中总结的一些经验，希望能帮到还在纠结要不要用AVIF的同学。虽然它还不是完美的银弹，但在图片优化这个领域，确实是目前最好的选择之一。

特别提醒下：不要盲目追求新技术，先评估好项目需求和目标用户群体。如果你们的用户大部分还在用老版本浏览器，那可能webp就够用了。

这个话题就聊到这，有更好的实践经验欢迎评论区交流。后续我可能会写一篇关于图片懒加载的实战总结，感兴趣的可以关注下。