每隔几年,就会有一种新的图片格式出现,承诺更小的文件和更好的画质。大多数最终默默无闻。但AVIF不同。它由开放媒体联盟(AOM)支持——该联盟成员包括Google、Apple、Mozilla、Microsoft、Netflix和Amazon——AVIF基于AV1视频编解码器构建,这是迄今为止开发的最高效的压缩技术之一。它不是一个实验性项目,而是Netflix用来分发数十亿缩略图、Android用作默认截图格式、所有主流浏览器都已支持的格式。
AVIF在同等视觉质量下,文件大小比JPEG小30%–50%,比WebP小20%–30%。它支持HDR、广色域、透明度和动画。从技术指标来看,它是目前最优秀的图片格式。
但AVIF也有实际的局限性。编码速度明显慢于JPEG或WebP。浏览器支持虽然增长迅速,但尚未达到WebP所享有的近乎通用的97%覆盖率。而且格式的复杂性意味着一些工具和平台仍然无法很好地处理它。
本指南将全面介绍AVIF——它的底层工作原理、与WebP和JPEG的真实压缩数据对比、当前浏览器支持状况,以及如何在不影响用户体验的前提下渐进式采用它。
AVIF的工作原理:AV1帧内编码技术
AVIF全称为AV1 Image File Format(AV1图片文件格式)。它采用AV1视频编解码器的帧内编码技术,并将其封装在HEIF(高效图片文件格式)容器中,具体定义在AOM AVIF规范中。理解底层技术有助于解释为什么AVIF的压缩效果远超旧格式。
AV1帧内编码
在视频压缩中,帧内帧(I-frame)是独立压缩的,不参考其他帧。AVIF使用AV1的帧内编码管线,其中包含多项远超JPEG或WebP的技术:
灵活的块分区。 JPEG使用固定的8×8块,WebP使用4×4和16×16块。AV1支持最大128×128像素的超级块,可以递归分割为不同大小——大块用于平滑区域,小块用于细节丰富的区域,将比特分配到最需要的地方。
高级预测模式。 AV1提供超过50种方向性帧内预测模式,而JPEG没有,WebP只有13种。更精确的预测意味着需要存储的数据更少,从而在渐变、图案和几何形状上实现显著更好的压缩效果。
多符号算术编码。 AV1的熵编码器能够适应图片数据的统计特性,榨取出JPEG的Huffman编码所遗漏的压缩空间。
环内滤波。 AV1在解码过程中应用去块滤波器、约束方向增强滤波器(CDEF)和环路恢复滤波器。这些滤波器减少了块边界处的块效应伪影,允许更激进的量化(更小的文件),同时保持视觉质量。
HDR、广色域及更多特性
AVIF的功能远不止压缩效率:
- 色彩深度:支持每通道8-bit、10-bit和12-bit(JPEG和WebP仅限8-bit)。更高的位深消除了微妙渐变中的色带现象——日落天空、肤色、摄影棚背景。
- 广色域:BT.2020和BT.2100支持让AVIF能够表现sRGB色域之外的鲜艳色彩,这是JPEG和WebP无法编码的。
- HDR传输函数:PQ和HLG支持为HDR显示器提供真正的HDR图片——随着HDR显示器日益普及,这一特性越来越有价值。
- Alpha透明度:在有损和无损模式下均支持,Alpha通道可独立压缩。
- 动画:HEIF容器中的图片序列提供了GIF和动画WebP的高质量替代方案,尽管工具链仍在成熟中。
AVIF vs WebP vs JPEG:压缩效果对比
任何图片格式的真正考验在于它在实际图片上的表现。我们在同等视觉质量下,分别使用JPEG、WebP和AVIF压缩了五张测试图片,以衡量差异。
测试方法
- 源图片:五张代表常见网页内容的图片——一张风景照、一张人像、一张白底产品照、一张带文字的截图和一张扁平风格插画。
- 质量校准:我们没有使用相同的数值质量设置(因为在不同格式中含义不同),而是校准设置以产生约0.95的等效SSIM(结构相似性指数)分数,代表适合网页交付的高视觉质量。
- JPEG设置:质量82,渐进式编码,4:2:0色度子采样。
- WebP设置:质量80,有损模式。
- AVIF设置:质量65(AVIF的质量刻度不同——相对于JPEG/WebP,较低的数值产生更高的质量),速度4(平衡编码速度)。
- 转换工具:ImgCompress.app,在MacBook Pro(M2芯片,16 GB内存)上使用Chrome 122客户端运行。
测试结果
| 图片类型 | 分辨率 | JPEG (Q82) | WebP (Q80) | AVIF (Q65) | AVIF vs JPEG | AVIF vs WebP |
|---|---|---|---|---|---|---|
| 风景照片 | 2400×1600 | 485 KB | 362 KB | 245 KB | −49% | −32% |
| 人像 | 1800×2400 | 390 KB | 295 KB | 198 KB | −49% | −33% |
| 产品照(白底) | 2000×2000 | 310 KB | 240 KB | 175 KB | −44% | −27% |
| 带文字截图 | 1920×1080 | 265 KB | 195 KB | 155 KB | −42% | −21% |
| 扁平插画 | 1200×800 | 95 KB | 72 KB | 58 KB | −39% | −19% |
数据解读
AVIF在所有图片类型上比JPEG小39%–49%。 摄影内容的节省最为显著,AV1的高级预测模式和灵活块分区在此类内容上表现出色。即使是扁平插画也实现了39%的缩减。
AVIF比WebP小19%–33%。 差距小于WebP对JPEG的优势,但仍然相当可观。对于风景照,AVIF比WebP额外节省了117 KB——在WebP已经显著优势的基础上再小32%。
摄影内容受益最大,但所有类型都有改善。 截图和插画相比WebP节省了19%–21%——差距较窄,因为WebP本身就能很好地处理锐利边缘和纯色,但AVIF仍然始终胜出。
浏览器兼容性:2025年AVIF的支持现状
浏览器支持是决定你能否在生产环境中实际使用AVIF的关键因素。以下是基于Can I Use 2025年初数据的当前状况。
当前支持情况
| 浏览器 | AVIF支持 | 起始版本 | 年份 |
|---|---|---|---|
| Chrome | 完全支持 | 85 | 2020 |
| Firefox | 完全支持 | 93 | 2021 |
| Edge | 完全支持 | 85 | 2020 |
| Opera | 完全支持 | 71 | 2020 |
| Safari | 完全支持 | 16.4 | 2023 |
| Samsung Internet | 完全支持 | 14.0 | 2021 |
| iOS Safari | 完全支持 | 16.4 | 2023 |
全球支持率
根据Can I Use的数据,截至2025年初,AVIF的全球浏览器支持率约为93%。这比2023年Safari加入后有了显著提升(Safari的采用将Apple整个生态系统纳入支持范围),但仍低于WebP约97%的覆盖率。
剩余约7%主要来自:
- macOS Monterey及更早版本上的旧版Safari(Safari 15及以下)
- Internet Explorer 11(已停止支持,但在某些企业环境中仍然存在)
- 未接收系统更新的旧版移动浏览器
- 一些小众和嵌入式浏览器
实际意义
93%的支持率足以将AVIF作为带回退方案的主要格式使用,但还不够高到可以在没有回退策略的情况下独占使用AVIF。实际做法是向支持AVIF的浏览器提供AVIF格式,对其余浏览器回退到WebP或JPEG——这正是<picture>元素的设计用途。
好消息是AVIF的支持率只会继续增长。每个主要浏览器厂商都已承诺支持该格式,随着旧版浏览器逐渐退出市场,支持率将继续向WebP的97%水平攀升。
实操教程:使用ImgCompress.app将图片转换为AVIF
让我们逐步演示如何使用ImgCompress.app将图片转换为AVIF格式,以便你可以亲自查看过程并评估结果。
分步转换流程
-
在浏览器中打开 图片格式转换器。所有转换都在浏览器本地完成——你的图片永远不会上传到任何服务器。
-
将源图片(JPEG、PNG或WebP)拖放到上传区域。你可以上传多个文件进行批量转换。
-
从格式下拉菜单中选择 AVIF 作为目标输出格式。
-
调整质量设置。对于大多数网页图片,质量设置60–70可以在文件大小和视觉质量之间取得出色的平衡。对于首屏大图或产品摄影等画质要求较高的场景,使用75–85。
-
点击转换。AVIF编码比JPEG或WebP计算量更大,因此处理时间会稍长——通常每张图片2–5秒,具体取决于分辨率和设备性能。ImgCompress.app使用Web Workers保持界面在编码过程中的响应性。
-
使用前后对比功能预览结果。特别注意以下区域:
- 渐变区域(检查是否有色带伪影)
- 精细文字和锐利边缘(检查是否模糊)
- 细微纹理区域(验证细节保留情况)
-
单独下载转换后的AVIF文件,或打包为ZIP压缩包下载。
按使用场景推荐的质量设置
| 使用场景 | 质量设置 | 相比JPEG的典型节省 | 备注 |
|---|---|---|---|
| 缩略图和预览图 | 50–60 | 55–65% | 小尺寸显示可隐藏伪影 |
| 博客图片和内容配图 | 60–70 | 45–55% | 大多数网页内容的良好平衡 |
| 首屏大图 | 70–80 | 35–45% | 突出位置的图片需要更高画质 |
| 产品摄影 | 75–85 | 30–40% | 保留细节以支持缩放查看 |
| 存档/无损 | 无损 | 相比PNG节省20–30% | 完美保留画质 |
转换技巧
- 从质量65开始,然后根据需要调整。 AVIF的质量刻度与JPEG不同——较低的数值并不一定意味着画质大幅下降。AVIF质量65的效果通常与JPEG质量82相当。
- 在实际显示尺寸下对比。 AVIF的伪影在图片实际显示尺寸下通常不可见。只有在需要验证用户可能全分辨率查看的图片质量时,才需要放大到100%。
- 对含文字的图形使用无损模式。 如果图片包含渲染文字、图表或像素艺术,使用无损AVIF以避免锐利边缘周围出现任何压缩伪影。
如需了解所有支持格式之间的转换概览,请参阅我们的图片格式转换指南。
AVIF的优势与局限
AVIF是一种令人印象深刻的格式,但并非完美。了解其优势和不足有助于你做出明智的使用决策。
优势
同类最佳的压缩效率。 如我们的测试数据所示,AVIF在同等视觉质量下始终产生最小的文件。对于摄影内容,相比JPEG(40%–50%)和WebP(20%–33%)的节省足以显著影响页面加载时间和带宽成本。
卓越的渐变和平滑色调处理。 AVIF的10-bit和12-bit色彩深度支持消除了8-bit JPEG和WebP在微妙渐变图片中常见的色带伪影——日落天空、摄影棚背景、人像中的肤色。
面向未来的HDR支持。 随着HDR显示器在笔记本电脑、手机和显示器上成为标配,AVIF的原生HDR能力将越来越有价值。没有其他广泛支持的网页图片格式提供可比的HDR支持。
免版税且开放。 AVIF基于AV1,后者专门设计为免版税。与HEIC(基于HEVC/H.265,具有复杂的专利许可)不同,AVIF可以被任何人免费使用,无需支付许可费。
强大的行业支持。 开放媒体联盟几乎包括了每一家主要科技公司。这种级别的支持确保了在可预见的未来持续的开发、优化和浏览器支持。
局限
编码速度慢。 AVIF最显著的实际局限。编码时间比JPEG长5–20倍——每张图片需要几秒而非几毫秒。对于批量处理数百张图片,这会累积起来。AV1编码器优化仍在进行中,速度已有大幅提升,但仍然慢于替代方案。
浏览器支持不完整。 在93%的全球支持率下,AVIF不能作为唯一格式而不遗漏部分用户。需要回退策略。
工具生态系统有限。 主流浏览器和操作系统支持AVIF,但许多图片编辑工具、CMS平台和CDN服务仍在跟进中。一些流行的WordPress插件和网站构建器尚不原生支持AVIF。
最大尺寸限制。 AV1在基线配置中将单帧限制为8192×4352像素——对于几乎所有网页图片来说足够,但对超高分辨率摄影是一个约束。
实现复杂性。 使用AVIF需要<picture>元素进行回退、正确的MIME类型配置(image/avif),以及可能需要更新构建管线以生成AVIF版本。
渐进式采用策略:AVIF + WebP + JPEG回退
鉴于AVIF的压缩优势和当前浏览器支持的局限性,2025年大多数网站的最佳方案是渐进式采用策略——为每个浏览器提供其能处理的最佳格式。
三层回退模式
HTML <picture> 元素允许你按优先级指定多个图片源。浏览器选择它支持的第一个格式:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="图片描述" />
</picture>
使用这种模式:
- 93%的浏览器 接收AVIF版本(最小文件)
- 约4%的浏览器 接收WebP版本(仍然比JPEG小得多)
- 约3%的浏览器 接收JPEG版本(通用回退)
浏览器自动处理格式选择——无需JavaScript,无需服务端检测,无需User-Agent嗅探。开箱即用。
实施注意事项
在构建过程中生成所有三种格式。 使用你的图片优化管线为每张图片创建AVIF、WebP和JPEG版本。三个版本的存储成本与为每个用户提供最优格式所节省的带宽相比微不足道。
优先为最大的图片创建AVIF版本。 如果为每张图片生成三个版本感觉过于繁琐,可以先为首屏大图、产品照片和其他大尺寸图片创建AVIF版本——这些图片的压缩节省影响最大。较小的图片如图标和缩略图可以继续使用WebP或PNG。
配置服务器的MIME类型。 确保你的Web服务器为.avif文件发送正确的Content-Type: image/avif头。大多数现代Web服务器和CDN会自动处理,但值得验证。
监控你的分析数据。 跟踪访客实际接收的格式。随着AVIF浏览器支持的增长,你最终可能可以完全放弃JPEG回退,将管线简化为仅AVIF + WebP。
何时暂不采用AVIF
如果你的图片主要是小图标或Logo(AVIF相比WebP的优势有限)、构建管线无法容纳第三种格式、编码速度是实时处理的瓶颈,或者你的受众分析显示AVIF兼容浏览器使用率较低,可以考虑暂时坚持WebP + JPEG方案。
对于大多数提供摄影内容的网站,相比JPEG 30%–50%的节省使AVIF值得投入。我们的终极图片压缩指南涵盖了为每种图片类型选择正确格式的更广泛策略。
AVIF的未来
AVIF的发展轨迹是清晰的。编码器性能持续改善——SVT-AV1在减少编码时间的同时保持效率方面取得了重大进展。Adobe Photoshop、GIMP和主要CDN提供商现在都提供AVIF支持,工具生态系统正在快速跟进。随着每个主要浏览器都承诺支持该格式,全球支持率将随着旧版本的淘汰自然攀升至WebP的97%水平。动画AVIF也在成熟中,提供了一种比GIF压缩效果好得多的高质量替代方案。
总结
AVIF代表了图片压缩领域真正的代际飞跃。基于AV1编解码器,得到每一家主要科技公司的支持,它在同等视觉质量下比JPEG小40%–50%,比WebP小20%–33%。加上原生HDR支持、广色域、10/12-bit色彩深度和免版税许可,AVIF是当今网页上最强大的图片格式。
2025年的实际情况是,AVIF最适合作为渐进式策略的一部分——向93%支持它的浏览器提供AVIF,向另外4%回退到WebP,并保留JPEG作为通用安全网。这种使用<picture>元素的三层方案实现简单,确保每位访客都能获得其浏览器能处理的最小文件。
编码速度的权衡是真实存在的,但可以管理。对于预处理资源(博客图片、产品照片、营销素材),额外的编码时间是一次性成本,在每次页面浏览中通过减少带宽来回收。对于用户上传的实时处理,在AVIF编码器变得更快之前,WebP仍然是更实用的选择。
如果你还没有尝试过AVIF,最好的评估方式是用你自己的图片。转换几张最大的照片,将文件大小和视觉质量与当前的JPEG或WebP版本进行对比。数据会说明一切。
准备好将图片转换为AVIF了吗?试试我们的免费格式转换工具——它完全在浏览器中运行,支持AVIF以及JPEG、PNG和WebP,让你在下载前对比结果。
相关阅读:
