webp avif 对比的结论：如果你能提前编码，就优先提供AVIF，并以WebP或JPEG作为回退；如果需要快速编码或只想用一种简单格式，就只用WebP。截至2026年10月，两者都已是广泛可用的Baseline功能，因此浏览器支持不再是决定因素。WebP图片的尺寸上限是16383 × 16383 px（WebP FAQ），只有非常大的全景图才会碰到这个限制。在web.dev发布的测试中，相同画质下AVIF的文件更小，并支持HDR；WebP的编码速度则快得多（web.dev，2023年更新）。体积差距取决于图片本身，所以在决定之前，请用自己的照片测量一下。
WebP与AVIF一览
两种格式的差别更多体现在成本和功能上，而不是支持情况。支持数据来自web-features 3.44.0（2026年10月22日）；其他行的数据来自Google的WebP文档和web.dev：
| WebP | AVIF | |
|---|---|---|
| Baseline状态 | 自2023年3月起广泛可用 | 自2026年7月起广泛可用 |
| 最早支持版本 | Chrome 32、Firefox 65、Safari 14、Safari iOS 14 | Chrome 85、Firefox 113、Safari 16.4、Safari iOS 16.1、Edge 121 |
| 压缩 | 在相同SSIM下，有损压缩比JPEG小25%到34%；无损压缩比PNG小26%（Google） | web.dev报告比JPEG节省50%以上，取决于内容和设置（web.dev） |
| 编码成本 | 快，算法更简单 | 较慢；成本很大程度上取决于速度设置 |
| 色彩 | 8位（有损）；WebP文档未提及HDR | 支持HDR和广色域 |
| 透明度、动画 | 支持，支持 | 支持，支持 |
2024年1月25日Edge 121加入AVIF时，它达到了Baseline“新近可用”；30个月后的2026年7月25日，它达到了“广泛可用”。如果你的统计仍显示有相当比例的浏览器版本低于Safari 16或Edge 121，就请保留回退。
文件大小：哪个更小？
web.dev发布的比较中，AVIF的文件更小，但差距因情况而异，任何单一百分比都可能产生误导。Google自己给出的WebP数据是比JPEG小25%到34%。web.dev的AVIF文章报告“相比JPEG节省超过50%”，同时提醒具体节省取决于内容、编码设置和画质目标。2023年的web.dev更新引用Imgix的数据：相比JPEG节省60%，相比WebP节省35%。这些数字来自不同的图片集，所以请测量你自己的图片。
由于结果取决于内容，请从自己的网站上至少选取三类图片来测试：一张大照片、一张带文字的截图或图形，以及一张小缩略图。用cwebp和libavif中的avifenc，在几个画质级别上编码每个源文件，然后比较你能接受的画质下的文件大小：
# WebP，质量 75
cwebp -q 75 hero.jpg -o hero.webp
# AVIF，以质量 60 为起点进行调整，使用 8 个线程
avifenc -q 60 --jobs 8 hero.jpg hero.avif
ls -l hero.*Squoosh在浏览器中做同样的事情，并提供并排滑块，对于少量图片来说更快。
编码速度与工具
WebP编码更快，当图片是按需生成时，这一点很重要。web.dev的2023年更新指出，在即时处理场景中，AVIF是常见编码器中最慢的；而在提前编码时，它在默认强度下也有竞争力。avifenc的--speed设置范围是0（最慢）到10（最快），默认值为6；速度越高，压缩效率越低。web.dev报告使用8个线程时编码速度约快5倍，但没有说明测试方法。
实际中：
- 构建阶段的流程（静态网站、带缓存的
next/image、带缓存的图片CDN）能很好地处理AVIF，因为每张图片只需编码一次。 - 没有缓存的即时缩放，才是WebP速度优势的用武之地。
- CMS上传：更改流程前，先确认你的CMS接受AVIF。WordPress自6.5版本（2024年）起接受AVIF上传，但前提是服务器的Imagick或GD库支持AVIF；在“工具 > 站点健康 > 信息 > 媒体处理”中可以看到是否支持（WordPress核心博客）。
用picture回退同时提供两种格式
使用<picture>元素，让每个浏览器从上到下选择它支持的第一种格式，并回退到<img>：
<picture>
<source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
<source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
<img src="hero-800.jpg"
srcset="hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="100vw"
width="1600" height="900" alt="Product on a desk">
</picture>
在手机上有三个细节很重要：
<img>上的width和height让浏览器在文件到达之前就预留空间，从而防止图片加载时的布局偏移。- 带
sizes的srcset让像素比为2的390px宽手机选择800w文件，而不是1600w文件（390 × 2 = 780个设备像素）。像素比为3的手机需要1170个设备像素，会选择1600w文件。为手机调整图片尺寸的内容见如何让网站适配手机。 alt、loading和fetchpriority应放在<img>上，而不是<source>上。
对于CSS背景，带type()的image-set()可以做同样的事，并且自2026年3月起已是广泛可用的Baseline功能：
.hero {
background-image: image-set(
url("hero.avif") type("image/avif"),
url("hero.webp") type("image/webp"),
url("hero.jpg") type("image/jpeg")
);
}CDN上的内容协商
一些图片CDN根据请求的Accept头选择格式，而不是使用<picture>（请查阅你的CDN文档）。这在iPhone上有一个陷阱。根据MDN的默认Accept值列表（2026年10月更新），Chrome和Edge 121+发送image/avif,image/webp,...，Firefox也会发送image/avif，而Safari的值以image/webp开头，并且没有列出AVIF。因此，只读取Accept的CDN会向Safari发送WebP，尽管Safari自16.4起就能解码AVIF。如果你希望iPhone上使用AVIF，请使用<picture>，或者确认你的CDN如何识别Safari。
JPEG XL怎么样？
JPEG XL还不是Baseline功能，因此需要回退。截至2026年10月，它在Safari 17+（仅静态图片）、Chrome 155、Firefox 158（2026年10月13日发布，见其发行说明）以及Edge 155（2026年10月8日发布，见其发行说明）中受支持。Samsung Internet不支持它，而且MDN browser-compat-data 8.1.7仍将Edge标记为不支持，因此web-features没有将其列为Baseline（MDN browser-compat-data）。对于支持它的浏览器，可以在AVIF上方增加第三行<source>，代价是每张图片多一次编码。
什么时候仍适合用JPEG
压缩良好的JPEG在以下情况下是合理的选择：
- 你无法修改标记或构建流程，而且CMS或CDN不会替你转换格式；
- 图片是小缩略图，节省的字节只有几KB；
- 文件需要让用户下载、发邮件或编辑，JPEG在所有工具中都能使用；
- 你已经为每种设备提供了合适的尺寸，并且页面通过了图片审核。
在Lighthouse 13（2025年10月）中，旧的“使用现代格式提供图片”审核已并入图片交付洞察（Chrome for Developers）。请把它当作页面上最大节省空间的指引；在考虑格式之前，先检查图片尺寸。如何运行和解读该审核，见Lighthouse移动端审核指南。
在手机尺寸的页面上检查结果
切换格式后，请检查两件事：加载的是否是正确的文件，以及布局是否发生了移动。DevTools的Network面板会显示每张图片实际使用的格式和大小；筛选Img，然后查看Type列。要了解现场数据中的速度，请使用移动页面速度测试指南中的方法。
至于布局，请在手机宽度下打开页面。Mobile View Extension会以手机的用户代理、屏幕尺寸和像素比重新加载标签页，因此你可以看到真实移动版页面的手机布局。它只显示布局：不测量图片体积或加载时间，并且使用桌面版Chrome引擎渲染，所以Safari的格式选择必须在Safari中检查。
常见问题
AVIF比WebP更好吗？
就文件大小而言，在已发布的测试中是的：在web.dev的比较中，AVIF在相近的画质下比JPEG和WebP产生更小的文件，而且支持HDR。请用你自己的图片验证，因为差距取决于内容。当编码速度重要，或你的工具不支持AVIF时，WebP更合适。
2026年所有浏览器都支持AVIF吗？
所有当前主流浏览器都支持。自2026年7月25日起，AVIF已是广泛可用的Baseline功能，Chrome 85、Firefox 113、Safari 16.4（Safari iOS 16.1）和Edge 121都支持。
还需要使用WebP吗？
需要。它可以作为AVIF之后的回退，或者当你的流程按需编码图片时，作为唯一的现代格式。自2020年Safari 14起，WebP已被所有主流浏览器支持。
AVIF会影响SEO吗？
不会。Google搜索将AVIF列为受支持的图片格式之一，与WebP、JPEG、PNG、GIF、BMP和SVG并列（Google搜索中心，2026年3月更新）。该页面没有把这种格式描述为排名信号。