AVIF是网络上最新的主流图片格式。它提供比JPEG和WebP更好的压缩效果，在相同视觉质量下生成比JPEG小 40-50%、比WebP小约20%的文件。目前全球超过92%的浏览器支持该格式。AVIF于2019年标准化，2023年前获得主流浏览器广泛支持，使其成为当今任何Web项目的实用选择。

AVIF是什么？

AVIF是AV1图像文件格式（AV1 Image File Format）的缩写。它是一种从AV1视频编解码器派生的静态图像和动画格式，将图像编码为AV1视频流的单个帧内编码帧。AV1由开放媒体联盟（AOMedia）开发，成员包括Google、 Mozilla、Microsoft、Apple、Netflix和Amazon等公司。该编解码器完全免版税——这是其创建的关键动机：避免与HEVC（HEIF/HEIC背后的编解码器）相关的专利许可费。

由于AVIF本质上是从AV1视频中提取的静态帧，它继承了AV1开发者多年来为视频传输精心打磨的所有先进压缩技术。这种研究投入正是使AVIF比专为静态图像设计的格式效率更高的原因。

AVIF vs JPEG vs WebP：文件大小比较

独立基准测试一致显示图像压缩效率的相同排名：

AVIF vs JPEG — 在相同感知质量下，AVIF文件通常比JPEG小40-50%。一个500 KB 的JPEG，其AVIF等效文件通常在250-300 KB之间。
AVIF vs WebP — 在同等质量下，AVIF比WebP小约20%。WebP已经比JPEG小 25-35%，AVIF在此基础上进一步扩大了优势。
AVIF vs JPEG XL — 两种格式具有竞争性，在所有图像类型上都没有一致的领先优势。 JPEG XL在照片图像的无损性能上更好，而AVIF在极低比特率（高度压缩的图像）方面领先。

一个重要提示：AVIF编码比WebP或JPEG慢得多。在等效质量设置下，AVIF编码可能需要10-50倍的时间。对于构建时预生成静态资源来说这是可以接受的——但对于实时即时编码，AVIF通常不实用。

AVIF如何实现更好的压缩

AVIF的压缩优势来自AV1帧内预测引擎，该引擎比JPEG（无预测）或WebP的VP8编解码器（为亮度块提供10种预测模式）使用的预测方法要先进得多。AV1每块支持超过60种方向性帧内预测模式，加上各种非方向性模式—— 能够用更少的比特表示图像内容。

高级帧内预测 — AV1使用精细的方向性模式（较大块以3°间隔从0°到180°）从邻居块预测每个编码块。预测后的残差大幅减小，编码所需的比特更少。
可变块大小 — AV1支持从4×4到128×128像素的块大小。编码器为均匀区域选择大块，为精细细节选择小块，对每个区域使用最优大小。
色度子采样支持 — AVIF原生支持4:2:0、4:2:2和4:4:4色度子采样。对于照片， 4:2:0（与JPEG相同）是典型选择；对于文字和清晰图形，4:4:4保留色彩准确性。
胶片颗粒合成 — AV1内置胶片颗粒合成工具，在编码过程中从源文件去除自然颗粒，并在解码时从紧凑的参数集重建。这在不使图像看起来人工光滑的情况下节省了比特。

AVIF功能优势

除了纯粹的压缩外，AVIF还支持旧格式所没有的功能：

HDR和宽色域 — AVIF支持10位和12位色深，支持具有Display P3和Rec. 2020色彩空间的HDR内容。JPEG限制在8位，WebP在网络传输中也只支持8位。
Alpha透明度 — 与WebP和PNG类似（但与JPEG不同），AVIF支持完整的Alpha通道透明度。Alpha平面使用相同的AV1编解码器编码，比PNG的无损Alpha提供更好的压缩效率。
无损和有损模式 — AVIF两者都支持。无损AVIF对于典型图像来说很少比无损WebP或 PNG小，但该选项是存在的。
动画 — AVIF使用AVIS（AV1图像序列）容器支持多帧动画。动画AVIF文件可以比动画WebP或GIF小得多，但编码比静态AVIF更慢。
色度子采样模式 — 支持4:2:0、4:2:2和4:4:4，可控制色彩细节的质量/大小权衡。

AVIF浏览器支持

截至2026年，AVIF在现代平台上获得了广泛的浏览器支持：

Chrome — 从第85版开始支持（2020年8月）
Firefox — 从第93版开始支持（2021年10月）
Safari — 从第16版开始支持（2022年9月，macOS Ventura / iOS 16）
Edge — 从第121版开始支持（2024年1月，基于Chromium）

截至2026年，全球浏览器支持率约为92-93%。不支持AVIF的浏览器包括Internet Explorer（已停止维护）、第16版以前的旧版Safari，以及部分旧版基于Chromium的移动浏览器。对于大多数Web项目来说，92%的支持率已经足够——特别是当使用 <picture>元素配合WebP或JPEG回退时更是如此。

AVIF编码速度权衡

AVIF的主要实际缺点是编码速度。在最大化压缩效率的质量设置下，AVIF编码可能比WebP慢10-50倍。WebP 转换需要100ms的任务，AVIF可能需要1-5秒。

这对如何使用AVIF有明确的含义：

适合构建时生成 — 如果在构建过程中预生成AVIF文件（例如，在Next.js构建中使用 sharp），编码时间只需支付一次，结果文件被缓存。这是理想场景。
不适合实时即时编码 — 在首次请求时转换图像的图像CDN和代理可以快速处理WebP，但AVIF可能导致不可接受的延迟。大多数图像CDN现在通过后台处理和缓存支持AVIF。
使用速度预设 — libaom-av1和 libsvtav1等编码器提供速度预设（0-10）。使用更快的预设（例如6-8）可以将编码时间减少3-10倍，文件大小损失较小——对大多数内容来说是合理的权衡。

何时使用AVIF

AVIF是正确选择的情况：

在构建时预生成静态资源 — 在部署期间生成图像变体的电商网站、博客和营销页面从 AVIF中获益最多。文件大小的节省直接减少页面重量和带宽成本。
受众使用现代浏览器 — 如果分析数据显示95%以上的流量来自Chrome、Firefox和现代Safari，92%的全球支持率对特定受众来说会更加有利。
以摄影为主的网站 — AVIF的压缩优势在摄影内容上最为显著。图库网站、作品集页面和媒体密集型博客能看到最大的文件大小缩减。
电商产品图片 — 产品页面通常提供数十张高质量图片。将产品图片转换为AVIF可以每次页面浏览减少数百KB的页面重量，提高Core Web Vitals分数。

何时改用WebP

在几种情况下WebP仍然是更好的选择：

实时转换 — 如果需要即时转换图像（例如用户上传、动态调整大小），WebP的编码速度使其更为实用。
更广泛的兼容性要求 — 如果您的受众中有相当比例的旧版Safari（16以前）用户，或需要接近97-98%的浏览器支持率，WebP是更安全的选择。截至2026年，其全球支持率超过97%。
更简单的工具链 — 几乎所有图像处理库都支持WebP编码。旧版ImageMagick或Pillow 中可能不支持或对AVIF支持有限。

如何将图片转换为AVIF

将PNG、JPEG或WebP图片转换为AVIF最简单的方法是使用Picovert的 PNG转AVIF工具。它完全在浏览器中运行——不会将任何文件上传到服务器——几秒内即可完成转换。对于其他源格式，使用通用的图片转换工具，它支持从任何支持的输入格式以AVIF为输出格式。

对于在构建管道中处理图像的开发者，sharp库（Node.js）是最常见的选择：

const sharp = require('sharp')
await sharp('input.jpg')
  .avif({ quality: 60, effort: 4 })
  .toFile('output.avif')

effort参数（0-9）控制速度/压缩权衡。较低值更快，较高值生成更小的文件。对于静态构建管道，effort 6-8是合理的平衡点。

用于渐进增强的HTML picture元素

在网络上提供AVIF时，推荐的模式是使用带有回退的HTML <picture>元素。浏览器会选择它支持的第一个源：

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述" width="800" height="600" />
</picture>

这种方法为支持AVIF的浏览器提供最小文件，对于不支持AVIF的Chrome和Firefox用户回退到WebP，最终在传统环境中回退到JPEG。为防止布局偏移（Core Web Vitals指标），应始终设置 <img>标签的width和height属性。

如果使用Next.js，在Next.js配置中设置formats: ["image/avif", "image/webp"]后，内置的<Image>组件会自动处理AVIF的提供。

要立即开始将图片转换为AVIF，请使用Picovert的图片转换工具进行格式转换，或使用图片压缩工具减小文件大小。两个工具都无需上传，直接在浏览器中运行。