- AVIF 利用 AV1 视频编解码器，压缩率比 JPEG 高出 50% 以上，显著提升了核心网络性能。
- 虽然浏览器现在几乎普遍支持 JPG 格式，但旧版软件和专业印刷服务仍然需要 JPG 格式才能兼容。
- 采用三重回退策略并结合图片元素，可确保在所有设备上提供无缝的用户体验。
说实话，网络本质上就是一个巨大的图片库，如果这些图片文件太大，用户流失的速度比你念出“带宽”这个词还快。很长一段时间以来，我们都认为 WebP 就是最终的解决方案，但AVIF 的出现彻底改写了我们处理在线视觉资源的方式。这可不是小修小补，而是效率的巨大飞跃，让那些老旧的格式看起来像是拨号上网时代的遗物。
如果您曾经疑惑为什么 Chrome 浏览器突然开始将图片保存为 .avif 文件，或者为什么一些您常用的专业工具无法打开它们，那么您来对地方了。我们将深入探讨 AV1 编解码器的技术细节，探索如何在质量和文件大小之间取得平衡，并找到最佳的图片呈现方式，确保您的网站速度飞快，同时又不影响使用老旧设备的用户。
秘诀：为什么 AVIF 能改变游戏规则
AVIF 最初并非图像格式；它本质上是AV1 视频编解码器中的静态帧。AVIF 由开放媒体联盟（成员包括谷歌、Netflix 和亚马逊等巨头）开发，旨在淘汰付费编解码器，并提供一种免版税的高清视频流媒体播放方式。当他们将相同的算法应用于静态照片时，便获得了极其强大的功能：在保持几乎相同视觉质量的前提下，文件大小比 JPEG 格式减少 50% 甚至更多。
AVIF 相较于 WebP 或 JPG 究竟有何优势？关键在于其数学运算。JPEG 采用固定的 8×8 色块系统，而 AVIF 则使用可变大小的 DCT 变换，这意味着它既可以使用大色块来表现湛蓝的天空，也可以使用小色块来表现面部细节。此外，AVIF 还支持高动态范围 (HDR) 和广色域 (WCG)，能够呈现标准 JPG 无法实现的色彩和亮度级别。
技术分析：AV1 对阵世界
要真正深入了解其工作原理，我们需要研究帧内预测模式。WebP 提供了几种像素预测方法，而 AVIF 则拥有71 种不同的方向模式。这使得编码器能够更精确地预测图像中发生的情况，从而减少了存储的“冗余”数据。另一个令人惊叹的功能是胶片颗粒合成。AVIF 不会像传统方法那样尝试编码低光照片中的每一个噪点（这通常会使文件大小暴增），而是只存储颗粒的统计参数，并在播放时指示浏览器“模拟”颗粒，从而节省大量空间。
权衡取舍：速度与效率
但问题在于：AVIF 在创建阶段会消耗大量资源。如果您使用像avifenc这样的工具，您会发现编码一张照片所需的时间比 WebP 要长得多。我们说的是秒级和毫秒级的差别。对于大多数开发者来说，这不成问题，因为他们在构建过程中只需要进行一次编码。但如果您尝试在运行中的服务器上实时转换图像，则需要非常积极的缓存策略，否则 CPU 会过载。
实用转换：从 JPG 到 AVIF
当您使用官方版本时 利巴维夫 工具， cq-level （量化级别）是最重要的设置。与JPEG的0-100刻度不同， AVIF的cq水平是反向的：0 是无损（但质量极高），而 63 是最低质量。对于大多数 Web 项目而言， “最佳范围”通常在18到23之间。. 尺寸再小，放大效果就会递减；尺寸再大，放大后画面又会显得有些粗糙。
如果您熟悉命令行，可以使用批处理脚本实现自动化。通常，将`--speed` 参数设置为 6是最佳平衡点；它既足够快，不会让人觉得烦躁，又足够高效，可以保持文件体积小巧。对于那些不喜欢使用终端的用户，像Squoosh 或 FormatVault这样的基于 Web 的工具可以让您直观地调整格式化质量，并实时查看结果，而无需安装任何软件。
兼容性差距：为什么你仍然需要 JPG 格式
尽管AVIF 格式在 Chrome、Firefox、Safari 和 Edge 等浏览器上的支持率接近 95%，但它并非万能。问题不在于浏览器，而在于其他方面。像 Photoshop CS6 这样的老旧软件、旧版本的 Windows 照片查看器以及大多数政府或企业上传门户网站都无法读取 AVIF 文件。如果您尝试将 .avif 文件上传到印刷服务商或旧版内容管理系统 (CMS)，很可能会收到验证错误提示。
这就是为什么将 AVIF 文件转换回 JPG 格式仍然是一项必要的技能。无论是为了兼容像 Outlook 这样无法正确显示 JPG 格式的电子邮件客户端，还是为了制作 PowerPoint 演示文稿，JPG 仍然是图像的通用语言。像Total Image Converter这样的工具非常适合这项工作，尤其是在需要一次性处理整个文件夹的下载文件时。
像专业人士一样呈现图片：三重备用方案
你不能只是简单地把 JPG 文件替换成 AVIF 文件就指望一切顺利。专业的做法是使用…… <picture> 元素。通过列出 首先是AVIF格式，然后是WebP格式，最后是JPEG格式。让浏览器选择它能够理解的最佳格式。这就像有一个包含三个选项的菜单；浏览器会选择它最先想到的那个。
保持你的 核心网络生命 在绿色区域，始终包含 显式宽度和高度属性这样可以防止令人头疼的累积布局偏移 (CLS)，即图片加载时内容位置跳动的情况。对于您的主“英雄”图片，请添加 fetchpriority="high" 告诉浏览器立即获取它，但使用 loading="lazy" 其他一切都是为了保持初始负载较轻。
对搜索引擎优化和用户体验的影响
谷歌不会仅仅因为你使用 AVIF 格式就给你颁发徽章，但它非常重视 LCP（最大内容绘制）。当你把一张巨大的产品图片从 400KB 缩小到 150KB 时，你就能直接缩短页面加载完成所需的时间。这有助于降低跳出率，提高转化率，尤其对于网络连接不稳定的移动用户来说，每一 KB 的数据都至关重要。
