众所周知，一图胜千言，图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言，传输与解析一张图片的代价要远比"千言"大的多的多(目前上亿像素已经成为主流)。
面对动辄 10 多 M 的大型图片，使用优化的图像来节省带宽和加载时间无疑是性能优化中的重头戏，无论对于用户还是公司都有巨大的意义。因为对于用户来说，可以更早的看到图片，对于公司而言，更加省钱。
Avif 介绍
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图片，不支持就响应原格式图片。
最近通过朋友介绍发现国人搞的Apiumc网关，它里面的有图片处理，可以从服务端采用优雅降级方式从avif、webp、png支持顺序响应图片，同时对图片支持切割，水印等等功能，能有效的做到应用不做任何改动来智能响应avif、webp、png，达到应用流量节省最高比，大大改善应用质量。
如何使用
第一步，你先下载Apiumc网关，（请查看下方的参考资料部分）安装注册后，用管理员登录到云桌面，在云桌面上点击“新增应用”，选择“Web应用”
我们就以掘金为例，再从弹出的界面上的应用网址填写掘金的图片服务地址“p3-juejin.byteimg.com” ，整个过程如下图：
点击确认后，我们51CTO的图片服务的反向代理就配置好了，这时候只支持图片处理快捷参数，我们可以配置图片处理模板来调整路径下的所有图片或者指定格式转码。
图片处理模板
回到云桌面，选择新建的应用的掘金图标，右点鼠标，选择“关于应用说明”
再选择“应用配置”，弹出应用配置界面，点击“图片处理”，把想转化图片类型输入进去，例如：image/png,image/jpeg（这里参数也可以路径，如果是路径表示这路径下的图片进行转码）。再回到“应用配置”界面，再点击刚才增强图片模板项，在图片模板点击转化类型，选择“智能格式，整个过程流程如下图：
完成后，则p3-juejin.byteimg.com全站的中png和jpeg都会转码成avif或webp来响应客户端了。
注意：整个过程请注意缓，也要注意webvpn缓存。
