【学习图片】09: AVIF
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。 更多开源作品请看 GitHub github.com/qq449245884… ，包含一线大厂面试完整考点、资料以及我的系列文章。
AV1图像文件格式（AVIF）是基于开源AV1视频编解码器的编码格式。与WebP相比，AVIF更加新颖，在Chrome和Opera仅于2020年支持，Firefox于2021年支持，Safari于2022年支持。与WebP一样，AVIF旨在解决网络上光栅图像的每一个可想象的用例：类似GIF的动画、类似PNG的透明度，以及在文件大小比JPEG或WebP更小的情况下提高感知质量。
到目前为止，AVIF显示出了很大的潜力。由AV1编解码器开发的Alliance for Open Media的创始成员Netflix开发的测试框架显示，与JPEG或WebP相比，AVIF的文件大小显著减小。Cloudinary和Chrome编解码器团队的其他研究也对其进行了积极的评估，与当前的编码标准相比更加优秀。
尽管工具有限，你仍然可以开始尝试使用AVIF，因为它是Squoosh提供的编码之一：
浏览器支持
如果你想知道为什么我们花费了这么多的时间讨论JPEG，而AVIF和WebP可以为我们提供更高质量的结果和更小的文件大小，那是因为它们——以及任何新的图像编码——都有一个主要的问题。GIF、PNG和JPEG的支持在所有浏览器中都是保证的，已经有几十年了。与这些传统的图像格式相比，AVIF是全新的，虽然WebP在现代浏览器中的支持非常好，但在整个网络上并不是一个常见的格式。
可以想象，开发旨在提高质量和传输大小的新图像格式所花费的时间和精力是巨大的。像WebP、AVIF和JPEG XL（没有在任何浏览器中支持）这样的格式旨在成为网络上光栅图像的统一解决方案，就像SVG对于矢量图形一样。而其他格式，比如JPEG 2000（仅在Safari中支持），旨在满足与基本的JPEG相同的用例，但改进了压缩方法以提供外观相似但更小的图像。
虽然其中一些较新的格式使用了JPEG名称，但它们的编码方式与JavaScript与Java本质上不同。如果浏览器不支持特定编码方式，则将无法解析该图像文件，就好像我要求你使用你不理解的语言来填写像素格纸一样。浏览器将请求图像数据，尝试解析它，但失败后将丢弃它而不渲染任何内容。在现代浏览器之外无法渲染的图像源将是我们内容和整个网络的重大故障点——对于世界各地的大量用户而言，这是一张损坏的图像和浪费的带宽。为了追求更高性能，不应该牺牲更健壮的网络。
长期以来，我们一心只用的<img>使得无论多有前途的新图像格式都极难使用。请记住，<img>只支持单个源文件，并且经过高度优化以快速传输该文件——实际上，我们无法通过JavaScript拦截该请求。直到最近，唯一可行的选择是向所有用户提供全新类型的图像，并在浏览器触发错误时请求“遗留”格式之一——在第一个文件传输之后，产生第二个文件传输。
因此，<img>必须发生变化，就像几十年来一直存在的那样。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub github.com/qq449245884… 已收录，有一线大厂面试完整考点、资料以及我的系列文章。