如何让应用使用下一代AVIF图片格式

众所周知，一图胜千言，图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言，传输与解析一张图片的代价要远比"千言"大的多的多(目前上亿像素已经成为主流)。

面对动辄 10 多 M 的大型图片，使用优化的图像来节省带宽和加载时间无疑是性能优化中的重头戏，无论对于用户还是公司都有巨大的意义。因为对于用户来说，可以更早的看到图片，对于公司而言，更加省钱。

AVIF 介绍

Avif格式是一个新型图片格式是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式；在对比中发现 AVIF 图片格式压缩很棒，基本上大小比 JPEG 小 10 倍左右且具有相同的图像质量。

但目前来说并不是所有浏览都支持，各浏览支持如下：

要想让应用用上avif格式，又来在各浏览器显示正常，就需要我们采用图片兼容方案来支持了，兼容方案为前端兼容方案和服务器后端兼容方案

前端兼容方案

前端兼容方案是采用优雅降级，但是考虑到目前的兼容程度，该方案其实聊胜于无。

<picture>
    <source srcset="img/photo.avif" type="image/avif">
    <source srcset="img/photo.webp" type="image/webp">  
    <img src="img/photo.jpg" alt="Description of Photo">
</picture>

服务器后端兼容方案

因浏览器会把所支持的图片格式加“Accept”请求头上，从而在服务器后端用“Accept”请求头来判断终端浏览器是否支持avif。

所以来说需要服务端按着上面逻辑来是确认支不支持，支持就响应avif图片，不支持就响应原格式图片。

最近通过朋友介绍发现国人开发的UMC网关服务器软件，他里面的有图片处理，可以从服务端采用优雅降级方式从avif、webp、png顺序响应图片，还支持常用图片切割，水印等等功能，能有效的做到应用不做任何改动来智能支持 avif、webp、png，能减少80-90%的图片流量，大大改善应用质量。UMC网关配置起来也得心应手，全程界面化，更多的图片处理，请下载使用，里面的文档，这里就不介绍了。

UMC网关下载

图片处理帮助文档