WebP、AVIF和JPEG的区别：用同一张手机照片实测

简短回答

在我们的测试照片上，画质相同时AVIF的文件最小，比JPEG小约四分之一。WebP介于两者之间，比JPEG小7%到13%。JPEG的文件最大，但所有主流浏览器都能打开它，无论新旧。

AVIF的代价是时间。用默认设置处理这张12百万像素的照片，图片转AVIF需要约六秒，图片转WebP和图片压缩各需要约1.6秒。截图用无损WebP，每个像素都保留，文件仍然小了一半以上。需要透明时，选WebP或AVIF：JPEG不支持透明。

我们怎样测量

2026年10月20日，我们从Wikimedia Commons取了一张公有领域的照片。照片拍的是日本岐阜的一处悬崖和森林，用Pixel 9a拍摄，4000 × 3000像素、4.4 MB，是一张典型的手机JPEG，里面有天空、树叶和岩石。

我们在一台2023款、12个处理器核心的MacBook上，用Chrome 155把它分别拖进pulsarkit.com上的每个工具。计时从拖入文件或更改设置开始，到“下载”按钮变为可用为止。下面的时间来自重复运行。每次访问的第一次运行会慢一些，因为编码器还在下载。

默认设置下画质并不相同，所以我们也调整了质量滑块。比较时，我们用的是SSIM：一种衡量两张图片有多接近的标准评分，1表示完全相同。这个分数是我们自己在下载的文件上、对照原照片计算的。

图片压缩会保留原格式，所以我们的JPEG文件，就是用MozJPEG重新编码的手机JPEG。“均衡”用质量70，“最高质量”用质量85。换一个JPEG编码器，文件大小就会不同。

画质相同时的文件大小

先看默认设置，因为什么都不改时得到的就是它。图片压缩选“均衡”，把4.4 MB的照片变成了1.5 MB。图片转WebP用质量80得到2.1 MB，图片转AVIF用质量60得到1.7 MB。这一轮JPEG胜出，只是因为它离原图最远：它的SSIM是0.957，WebP是0.977，AVIF是0.975。

要和JPEG的0.957持平，WebP需要质量60，AVIF需要质量50。文件大小分别是：JPEG 1.5 MB，WebP 1.4 MB，AVIF 1.2 MB。也就是说，WebP比JPEG小7%，AVIF小24%。

在约0.978持平时，JPEG需要“最高质量”，WebP需要质量81，AVIF需要质量62，得到的文件分别是2.5 MB、2.1 MB和1.8 MB：WebP比JPEG小13%，AVIF小26%。两轮比较中，AVIF都比WebP小15%到18%。

这些数据只来自一张照片；如果照片的纹理更丰富，或画面中空旷天空的占比更大，结果也会不同。每个工具都会显示处理前后的大小，数值取自生成的文件，所以检查你自己的照片只要几秒钟。

浏览器里的编码时间

图片压缩和图片转WebP处理这张照片用了1.6到1.7秒。图片转AVIF用默认设置需要5.7到6.2秒，每次访问的第一次AVIF运行需要6.7到7.9秒。这一次还要下载约1.1 MB的编码器。

在标签页里，AVIF编码器只用一个处理器核心。图片超过6百万像素时，工具还会自动提高速度，缩短等待时间。我们这张12百万像素的照片是以速度7编码的，尽管“编码速度”菜单里显示的默认值仍是6。

把“编码速度”设为最快的10，这张照片只需要1.4到1.6秒。文件小了1%，SSIM的变化不到0.001。在这张照片上，快速设置没有带来我们能测出的损失；处理你自己的照片时，比较一下页面显示的大小。

细节、截图和透明度

按100%查看时，无论哪个画质档位，我们都分不出三个文件的区别。放大到300%、看较低的那一档时，每种格式都会留下自己的痕迹。JPEG在平坦的天空和树林边缘出现了淡淡的方块。WebP和AVIF让天空保持平滑，但也抹掉了相机传感器细小的颗粒。AVIF抹得最多：树叶之间的暗处显得更柔和、更平。

细小的彩色细节以另一种方式受损。我们把一张截图放大到8倍：在有损WebP和默认设置的AVIF里，一个图标上细细的红色箭头变暗、变糊了。两者默认都以一半的分辨率保存颜色，有损WebP则始终如此。无损WebP把箭头保留得分毫不差。AVIF把“色彩细节”设为4:4:4后，箭头也很干净，代价是字节数增加3%。

这张截图本身是一个网页的PNG，1280 × 800、79 KB，更适合无损压缩。无损WebP把它压到33 KB，每个像素都不变。有损WebP得到31 KB，AVIF得到27 KB，但都有上面说的模糊。图片压缩保留PNG格式，把颜色减到122种，压到了25 KB。

测试透明度时，我们用了一个边缘柔和的600 × 200 PNG Logo，9.4 KB。图片转WebP把它变成4.4 KB，图片转AVIF变成4.5 KB，两者都保留了它的206级透明度，每个像素的透明度都与原图一致。JPEG没有Alpha通道，所以透明区域必须变成纯色。透明的WebP转成JPEG时，WebP转JPG会在后面垫上白色；也可以在“透明区域的背景”里设置别的颜色。

每种格式在哪里打不开

JPEG最稳妥：MDN列出Chrome、Edge、Firefox、Opera和Safari的每个版本都支持它。2026年10月20日，caniuse.com上的数据显示，WebP覆盖了全球浏览器使用量的97.18%；AVIF覆盖了96.35%，其中包括部分支持。

缺口在较旧的软件里。Mac上的Safari从16.4版起完整显示AVIF，16.1到16.3版只部分支持。Edge从121版起支持。Internet Explorer两种格式都打不开，Opera Mini能打开WebP，但打不开AVIF。WordPress从6.5版起接受AVIF，而且要服务器上的图片库支持才行。

Google搜索支持网页上的这两种格式：它的图片指南把WebP和AVIF与JPEG、PNG列在一起。在慢速网络上会看出一个区别：AVIF不能渐进式显示，所以整个文件到达之前，浏览器什么都不显示。如果某个表单或旧程序拒收WebP，WebP转JPG可以在标签页里把它转成JPEG。