共计 1531 个字符，预计需要花费 4 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。
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。
原文：https://web.dev/learn/images/…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。