7折
减价出售
¥799
AVIF 与 WebP：哪种图像格式更为主流？
AVIF 与 WebP 的介绍
WebP和AVIF是下一代格式，旨在实现更小的文件大小同时保持高质量的图像。谷歌在2010年向我们介绍了WebP，而AVIF则稍显新颖。该校成立于2019年。
WebP最初是作为传统图像格式JPEG、JPG和PNG的替代品推出的。
它非常适合拍摄真彩色摄影图像，因为它能够显示更多像素。此外，它提供了超快的加载速度，因为WebP文件比PNG文件小26%，比JPEG文件小最多34%。
另一方面，AVIF源自AVI视频编码器，是有损压缩的绝佳选择。有损压缩是指从文件中移除不必要的数据，通常不会明显降低质量。
此外，AVIF还能帮助你降低带宽成本，因为文件大小非常小：
更何况，AVIF相当灵活。例如，虽然这两种文件格式都有严格的分辨率限制，但 AVIF 允许你通过渲染独立编码的瓦片来超越这个限制。此外，AVIF还是视频、动画和透明背景图片的首选。
AVIF 与 WebP：三个关键因素需要考虑
为了更深入地理解AVIF和WebP，你应该熟悉它们的主要区别。这样，你可以为你的网站和需求选择最合适的格式。考虑到这一点，让我们来看看三个重要因素：
1. 压缩能力
图像压缩是选择AVIF和WebP时最重要的考虑因素之一。文件体积较小，可以延长加载时间，减少大型内容图（LCP）。这反过来为访客提供了更好的用户体验（UX），并有望提升您在搜索结果页中的排名。
请看下面的并排图片：
上面图片的原始JPG是我用三星手机拍摄的。然后我把它放进Squoosh应用，转换成AVIF文件，再用原始源镜像做了一次，把它转换成WebP。Squoosh 应用可以让你微调压缩设置，但我只是保持默认设置，然后下载了文件。
然后我截了每个缩略图，让你看到它们大小相同，同时打开文件细节也截图了。最后，我把所有照片放在一起，最后截了一张图，就是你上面看到的。我稍后会解释为什么我这样做——当我们讨论浏览器和平台支持时。
不幸的是，这种方法也限制了你观看图像的方式。你看到的不是真实的 JPG、AVIF 和 WebP，而是这些原始文件类型的 PNG 格式。
话虽如此，既然是我截图的，也有机会查看文件，我可以证明你看到的正是它们的质量和外观。
三张照片之间没有明显差别，但从文件大小可以看出，AVIF明显领先（295 KB），其次是WebP（417 KB），最后是JPG（564 KB）。
长话短说，AVIF和WebP都能在更小的体积内渲染平滑锐利的图像，而相比JPG版本。很少见到负面影响，大多数情况下从JPG转换时画质会保持。
总体而言，就纯压缩而言，AVIF是处理非常精确图像（如图形）的更优选择。此外，它非常适合需要高度清晰度的文字图像。
2. 图像质量
图像质量指的是像素中存储细节的准确性，如颜色、对比度和阴影。高质量的图像会清晰锐利。通常，图像分辨率越高，图像质量越好，因为显示的像素数（PPI）越多。
这两种图片文件格式都存在一些大小限制。例如，AVIF的图像分辨率限制为65,538×65,536像素，尺寸限制为6,780×4,320像素。不过，正如我之前提到的，通过渲染独立编码的瓦片，可以超越限制。
另一方面，WebP图像的最大像素尺寸为16,383乘以16,383。这是一个严格的限制，不能超过。
我们也可以比较AVIF和WebP的位深。该术语指的是显示单个像素颜色所需的比特数量。本质上，位深越高，图像能显示的颜色越多。
与JPEG类似，WebP仅支持最大8比特深度，约为1600万色。AVIF 稍微扩展了这个范围，支持位深为 10。因此，AVIF能够显示更多颜色，但生成的文件也可能占用更多存储空间，并需要更高的处理能力。
此外，这两种文件格式都支持高动态范围（HDR）图像。这使它们非常适合拍照。然而，AVIF 在这方面领先，拥有更宽的色域并支持色度子采样。这样，你可以在不影响图像质量的情况下减少信号中的色彩信息。
3. 浏览器和平台支持
到目前为止，你可能喜欢你看到的内容，并且可能认为AVIF或WebP是你网站的合适选择。不过，在你下定决心购买任一图片格式之前，重要的是要同时考虑浏览器和平台的支持。
浏览器支持
如果文件格式兼容您的浏览器，说明图片会正确显示在页面上。此外，它还允许你进行各种作，比如下载图片或保存到电脑。然而，由于一些现代图片格式还很新，浏览器支持直到最近才开始跟上。
由于WebP存在时间更长，它比AVIF更早被广泛采用。然而，截至2024年1月，所有主流浏览器均支持这两种格式，包括Microsoft Edge和Firefox。此外，所有主流移动浏览器都支持 WebP，大多数浏览器也支持 AVIF。目前尚未支持 AVIF 的显著移动端例外包括 Opera Mini、QQ 浏览器和 KaiOS 浏览器。
以下是根据Can I Use提供的全球WebP和AVIF支持数据：
- WebP——大约96.86%的网页用户使用支持WebP的浏览器。
- AVIF – 大约93.16%的网页用户使用支持AVIF的浏览器。
所以虽然两者都支持大多数浏览器，但WebP仍然略占优势。
平台支持
就平台而言，虽然我们没有所有平台的信息，但我们知道从6.5版本开始，WordPress主题支持AVIF。2 如果你像我一样是WordPress用户，那这是个好消息。理论上你可以像上传 JPG、PNG 甚至 WebP 一样上传 AVIF 文件到你的 WordPress 网站。
但实际上，情况要复杂得多。
原因是服务器端的图像处理也需要设置来处理AVIF文件，而这些处理由你的主机公司控制。查看你的WordPress目前是否支持AVIF的最简单方法是通过WordPress仪表盘。
请访问wordpress后台->工具➡️网站健康。你会看到状态标签和信息标签。点击“信息”。然后展开媒体处理部分，寻找所谓的 GD 支持文件格式：
正如你从上面截图看到的，即使我用的是最新版本的WordPress，也不代表我可以自动上传AVIF文件。这就是为什么我之前展示三种文件类型压缩能力时无法做三列设置，而是截了三种文件的截图。
