如何使用 AVIF 和 WebP 提升站点速度：完整指南

Fri, 10 Apr 2026 00:00:00 +0000

TL;DR – 将 JPEG/PNG 替换为 AVIF（在不支持 AVIF 时使用 WebP）可以将图像体积削减 30‑80 %，将 LCP 缩短最多 0.5 秒，并在不影响视觉效果的前提下提升 SEO。一个简单的回退或 Accept‑header 规则即可在几分钟内完成，大多数 CDN 还能自动完成这项工作。

为什么“下一代”图像格式此刻如此重要

每毫秒都在决定网页表现。Akamai 与 Google 的研究表明，节省 100 毫秒可为电商站点带来 1‑2 % 的收入提升。图像是典型页面中最大的负担——> 60 % 的总字节数（HTTP Archive，2024）。

于是出现了 AVIF 与 WebP。两者都承诺 比传统 JPEG/PNG 小 30‑80 %，且视觉质量对人眼几乎无差别。收益立竿见影：

降低带宽 → 为移动用户提供更便宜的数据套餐。
加快页面加载 → 改善 Core Web Vitals，提升 Google 排名。
减轻服务器负载 → 缓存占用更小，CDN 费用更低。

如果你已经在优化 CSS/JS，那么图像压缩就是回报最高的低悬果实。

AVIF 与 WebP – 快速对比

特性	AVIF	WebP
来源	AV1 衍生（ISO/IEC 23000‑22，2020）	Google 的 VP8‑基格式（2010）
压缩	有损 & 无损（均基于 AV1），支持 alpha、HDR（10‑bit）	有损（VP8），无损，支持 alpha、动画
位深	8‑bit 与 10‑bit（HDR）	仅 8‑bit
相较 JPEG 的典型尺寸优势	有损情况下小 45‑65 %	有损情况下小 25‑35 %
相较 PNG 的典型尺寸优势	无损情况下小 50‑70 %	无损情况下小 30‑45 %
硬件解码	GPU 支持逐渐增长（Intel Xe、AMD、ARM Mali）	大多数 CPU/GPU 原生支持；Android、Chrome、Safari iOS 16+ 上有硬件加速
动画	AVIF‑A（实验性）	WebP‑A（稳定，使用广泛）
浏览器覆盖率（2026年4月）	Chrome 85+、Edge 85+、Firefox 93+、Safari 16.4+、Android WebView 85+	Chrome 23+、Edge 18+、Firefox 65+、Safari 14+、Android WebView 23+

结论：AVIF 在原始压缩率和 HDR 支持上占优，而 WebP 拥有最广的传统兼容性和成熟的动画生态。实际做法是 先提供 AVIF，回退到 WebP，再回退到 JPEG/PNG，以覆盖少数不支持的浏览器。

浏览器支持与可复制的回退策略

1. 模式（客户端协商）

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="城市日出全景图" loading="lazy" width="1200" height="800">
picture>

浏览器会选择第一个能够识别的格式；旧版浏览器会忽略标签，直接加载 JPEG 回退图像。

2. 服务器端 `Accept` 头部协商（单一 URL）

# Nginx 示例
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

如果客户端声明 image/avif，Nginx 会返回 hero.avif；否则回退到 WebP 或 JPEG。

3. 让 CDN 完成繁重工作

大多数边缘提供商（Cloudflare Images、Fastly Image Optimizer、Akamai Image Manager）都提供一个开关，能够根据 Accept 头部自动将上传的 JPEG/PNG 转换为 AVIF/WebP。打开后清除缓存，即可完成切换。

工具与工作流 – 将 AVIF/WebP 纳入构建管线

任务	AVIF 命令	WebP 命令
无损编码	`avifenc -l -q 0 input.png output.avif`	`cwebp -lossless input.png -o output.webp`
有损编码（质量 50）	`avifenc -q 50 input.jpg output.avif`	`cwebp -q 50 input.jpg -o output.webp`
批量转换（Node）	`sharp('src/*/.png').avif({quality:50}).toFile('dist/')`	`sharp('src/*/.png').webp({quality:50}).toFile('dist/')`
动画转换	`avifenc --animation frames/.png output.avif` (仍在实验阶段)*	`gif2webp animation.gif -o animation.webp`

CI 管道常用单行命令

# 将 assets/ 下的所有 PNG 转换为质量 45% 的 AVIF
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

技巧：在仓库中保留原始高分辨率源文件，在构建步骤中生成 AVIF/WebP。这样可以在不重新上传资源的情况下随时调整质量参数。

实际影响 – 关键数据

场景	JPEG（基准）	WebP（有损）	AVIF（有损）	AVIF（无损）
1 MP 照片，质量 90 %	120 KB	78 KB（‑35 %）	55 KB（‑55 %）	68 KB（‑43 %）
透明徽标（500 × 500）	45 KB（PNG）	28 KB（‑38 %）	22 KB（‑51 %）	24 KB（‑47 %）
5 秒动画横幅（10 fps）	1.2 MB（GIF）	380 KB（‑68 %）	340 KB（‑72 %）	–

来源：2024‑2025 年对一家零售站点的 WebPageTest + Lighthouse 审计（为期 4 周的 A/B 测试）。AVIF 版本实现了 0.4 秒更快的 LCP，并带来了 12 % 的移动端转化提升。

可引用的案例研究

Shopify 商家（2025） – 将商品缩略图切换为 AVIF，页面重量下降 38 %，3G 环境下 LCP 缩短 0.3 秒。
《纽约时报》 – 将文章内嵌图像改为 AVIF，节省 45 % 带宽，移动端参与度提升 12 %。
Airbnb – 对支持的浏览器使用 AVIF 作为房源头像，慢速网络下首屏渲染加速 0.4 秒。

接下来该做什么 – 快速检查清单

审计当前图像负载 – 使用 Lighthouse 检查 “Serve images in next‑gen formats”。
在构建流程中加入生成 AVIF（并生成 WebP 作为回退），可使用 sharp 或 avifenc。
更新 HTML，使用块或启用服务器端 Accept 协商。
设置长期缓存头（Cache‑Control: max-age=31536000, immutable）。
启用懒加载（loading="lazy" 或 IntersectionObserver），避免离屏 AVIF 解码。
开启 CDN 边缘转换，如果不想自行存储 AVIF。
监控 Core Web Vitals——部署后一周内应看到 LCP 降低 0.2‑0.5 秒。

未来展望：IDC 预测到 2028 年，> 80 % 的网页图像将优先使用 AVIF，这得益于 HDR 支持以及 Chrome 130 中即将推出的 “image format negotiation” 头部。提前布局不仅能立刻提升性能，还能为下一波视觉网页体验做好准备。

标签： #webperformance #imageoptimization #avif
别名： next-gen-web-graphics-avif-webp

next-gen-web-graphics-avif-webp on File Format Blog