WordPress网站使用AVIF格式优化图片：AVIF比WebP压缩还高30%

AVIF格式简介

AVIF图像编码格式是新一代的开源编码格式，由Netflix这家公司在2020年公布的。Netflix是一家流媒体影视公司，必然会有大量影视海报，都是大图片。因此，Netflix对高清晰同时体积较小的图片诉求很高，需要一种替代JPEG的方法，这种新的方法需要支持以下特性：

a）得到广泛支持，b）具有更好的压缩效率，c）具有更广泛的功能集。

然后Netflix觉得AV1图像文件格式（AVIF）很有潜力，于是决定公布和开源。

已有的图片格式为什么不行

除了JPG，还有其他几种为人熟知的图片编码格式，如JPEG2000、WebP与HEVC。

但均有不足，例如：

• 基于离散小波变换（DWT）的JPEG 2000格式是2000年JPEG的继承者。它带来了空间可伸缩性、感兴趣区域编码、支持比特深度范围、颜色平面数目灵活、无损编码等一系列附加特性，随着运动的扩展，2004年被公认为数字电影的视频编码标准。但并没有得到很好的市场推广（对比Google大力推崇的WebP、苹果IOS系统支持的 HEVC）。JPEG2000在数字影院、指纹鉴别等小范围内流行，但明显缺乏更加强大、大众化、商业化的软件生态支持，故而并没有实现真正的落地普及。
• WebP 源于VP8，是Google 2010年开源出来的图像编解码算法，可以说是“含着金汤匙出生”，YouTube、Gmail、Google Play均应用WebP图片格式。2018年之后，浏览器Edge、Firefox也宣布支持WebP格式。但就目前来说，WebP仍只被看作PNG更高效快捷的替代方案，而且Google的一些非开源的技术总是能神奇地阻碍图片的分享。
• HEVC是AVC(H.264)的后继产品，性能优秀，你可以在Apple设备上将HEIF（HEIF是存储HEVC编码的静态图像的容器）玩出各种花样。可惜的是，这支大佬的“独苗”存在专利费用。

AVIF技术特点

尽管现代视频编解码器的开发主要考虑了视频，但视频编解码器中的帧内编码工具与图像压缩工具没有显着差异。鉴于现代视频编解码器的巨大压缩增益，它们作为图像编码格式非常引人注目。重用硬件进行视频压缩/解压缩有一个潜在的好处。考虑到操作系统相关的 UI 组合的特殊性以及移动未压缩图像像素的架构含义，硬件中的图像解码可能不是主要动机。

在图像编码格式领域，运动图像专家组 (MPEG) 已经标准化了与编解码器无关的通用图像容器格式：ISO/IEC 23000–12 标准（又名 HEIF）。HEIF 已被用于存储最显着的 HEVC 编码图像（在其 HEIC 变体中），但也能够存储 AVC 编码图像甚至 JPEG 编码图像。开放媒体联盟 (AOM) 最近扩展了这种格式，以指定以 AVIF 格式存储 AV1 编码图像。基本 HEIF 格式提供了图像格式所期望的典型功能，例如：支持任何图像编解码器、使用有损或无损模式进行压缩的能力、支持各种二次采样和位深度等。此外，该格式还允许一系列动画帧的存储（提供了一种高效且期待已久的动画 GIF 替代方案），以及指定 Alpha 通道的能力（在 UI 中得到了极大的使用）。此外，由于 HEIF 格式借鉴了下一代视频压缩的经验，因此该格式允许保留元数据，例如色域和高动态范围 (HDR) 信息。

AVIF的优势

我觉得AVIF图片格式有下面几个优点：

1. 一统天下；
2. 压缩溜溜溜；
3. 开源JS可解析；

AVIF由开源组织AOMedia开发，Netflix、Google与Apple均是该组织的成员。看到没，几个大佬都在，因此是一统天下的图片格式。

AVIF图片格式的压缩对比

AVIF是基于AV1的新图像格式，使用HEIF作为容器（和Apple的HEVC一样）和AV1帧，压缩质量还真是叹为观止。

下面几张图是官方提供的：

这是原始图，无损PNG，近乎700K：

JPEG 444的效果图，大小@ 20,429字节：

这是AVIF的效果图，大小@ 19,788字节：

可以看到，在同样尺寸大小范围内，JPEG格式的图形已经糊成浆糊一样，大片的明显的色块色条就像是斑驳的老建筑，无法直视。但是，AVIF格式的图形显示却非常OK，体积也很小。

此时的AVIF相比无损PNG有约59倍的压缩性能（原始图像尺寸768×512，因此无损字节数是768x512x3 ，现在压缩到20k，压缩比59倍）。

如果我们提高以下图片的压缩质量，不要压缩那么狠，再看下JPG图片和AVIF图片效果，都是无损PNG截图效果，以便准确对比。

JPEG 444的效果图，大小@ 40,276字节：

这是AVIF 444的效果图，大小@ 39,819字节：

可以看到，JPG图片的天空有很多明显颜色渗漏，视觉上一点也不平滑，而AVIF图像与原始图像视觉效果相当，这里的压缩系数为29倍。

官方还提供了很多其他对比图，还有对比图标和数据，这里就不一一展示了，有兴趣可以去文章一开始提到的博文地址查阅。

总而言之一句话，AVIF图片格式压缩很棒，件大小比JPEG小10倍，具有相同的图像质量。

另外，AVIF不仅支持标准动态范围（SDR）图像，还支持高动态范围（HDR）和宽色域（WCG）。它可以存储单个图像和图像序列。

AVIF是符合HEIF标准的格式。

种种迹象表明，这一次的AVIF是来真的了。

AVIF图像格式转换

分享一个在线转换AVIF图像格式的工具：https://avif.io/

可以把AVIF转换成JPG，PNG格式，也可以把JPG，PNG转换成AVIF格式，毕竟AVIF编码都是开源的。

WebP & AVIF对比

速度需求

网页速度用来衡量网页加载内容的速度。通常，网站的网页速度应该在不损害用户体验的情况下足够快。影响网页速度的因素有很多，其中之一就有图片优化。对于开发者来说，往往最大的挑战总是图片。当我们在讨论网页加载缓慢的问题时，图片往往就是罪魁祸首。

无论是对于终端用户、搜索引擎还是广告来说，速度是第一要素。

位于山峰，即使孤独，也不虚此行

谷歌认为Core Web Vitals（核心网页指标）对所有的网站体验都至关重要。Core Web Vitals是谷歌用来衡量用户真实体验、以用户为中心的一套关键指标。谷歌有计划将网页体验作为一个谷歌官方排名的影响因素，网站的用户体验将对网站的排名产生更大的影响。Core Web Vitals的规范将使你持续接收新闻提要。对于我们大多数人来说，苹果或谷歌的新闻阅读器一直是我们的“晨报”。如果保持定期更新，谷歌的新闻阅读器将是博客流量的一个重要来源。Core Web Vitals包含了网页加载时间、可视化的稳定性和页面交互性三个指标。

接下来，让我们看看如何使用 AEM Dynamic Media（动态媒体）来获得更高的谷歌排名，它可以实现更快的页面加载，并且保留高质量的视觉效果。

*Adobe Experience Manager (AEM) 是一种用于构建网站、移动设备应用程序和表单的全面内容管理解决方案。

WebP的出现

JPEG/PNG 是目前最常用的图片格式（几乎所有浏览器都支持），它们已经出现了将近20年。而WebP 则是一种现代的图片格式，它可以对网络上的图片进行更加高性能的无损和有损压缩。WebP 可以更显著地压缩网页上照片的大小，使网站加载速度比以前更快。同时WebP也支持透明图层和多图片动图，它是透明PNG图片和GIF动图绝佳的替代方案。

为AVIF文件格式开路

AVIF (AV1 Image File Format，AV1图像文件格式)是一种图片格式，用于将AV1压缩的图片或图片序列存储为HEIF文件格式。目前主流流媒体公司如 NETFLIX 和谷歌（谷歌浏览器）都支持这种格式，AVIF图片格式看起来前途无限。像WebP一样，AVIF 也支持透明图片和多图片动图。因此也是PNG图片和GIF动图的替代方案。

在AEM Dynamic Media智能成像中支持WebP和AVIF

在AEM Dynamic Media中，我们从一开始就支持了WebP图片格式。在利用 WebP 优化网页加载速度方面，我们已经取得了很大进步，使整个用户群体获得了更好的体验。

这主要是得益于智能成像（Smart Imaging）功能。这是一项应用于Adobe Sensei的专利技术，它可以根据用户浏览器性能和终端用户特征来自动优化图像格式、大小和质量，从而提高图像传输的性能。所有的Dynamic Media Classic 和AEM Dynamic Media用户都支持这一功能，并且不会收取额外的费用。

*Dynamic Media Classic是客户创建、创作和交付富媒体内容的中心。它是一个集成的富媒体管理、发布和服务环境。Dynamic Media 是 Dynamic Media Classic功能的下一代演变。

在 Adobe，我们希望能尽早提供支持动态媒体解决方案的AVIF图像格式。我们现在支持AVIF格式的图像传递（Image Delivery），它和AVIF结合是非常酷炫的！我们将继续尝试把它作为一个URL fmt修饰符。

敬请期待——我们很快会在智能成像中支持AVIF

基于AEM网站的AEM Dynamic Media

AEM Dynamic Media的智能成像功能也可以用于AEM网站，它可以使你的网站轻量级且加载速度更快，从而提高网站性能。如果要将动态媒体功能添加到您在AEM网站上创作的数字资产中，您可以直接在页面上添加相关的动态媒体组件。动态媒体组件是智能化的，它们能识别你是在添加图像还是视频，并且能随之更改可用的配置选项。只要在您的动态媒体账户中激活了智能成像功能，它将在您的AEM网站页面上启用。

动态媒体图像功能目前也可用于AEM网站图片和Carousel核心组件。

对比几种图片格式

在AEM Dynamic Media中，PNG格式的图片常被认为是无损的。因此，所有PNG图片总是以百分百的质量传输。在这次的比较中，我们对比了将质量设为90的JPEG/WebP格式图片和质量设为50的AVIF格式图片。值得一提的是，对于不同格式的图片来说，图片质量的大小都是主观的。

那我们如何确保图片具有相同的视觉质量呢？答案是PSRN（峰值信噪比）。PSNR 是比较同一图片恢复结果的好方法。以PNG格式做对比，我计算了JPEG/WebP/AVIF格式图片的PSNR值。

在这里，我们可以观察到，与质量为90的JPEG格式图片相比，质量为90的WebP格式图片和质量为50的AVIF格式图片的PSNR值差不多。

使用WebP格式和AVIF格式时，在图片大小上的优化是惊人的。

根据我们的实验结果，在使用AEM Dynamic Media时，我们推荐使用质量为50的AVIF格式图片来替换质量为90的 WebP/JPEG格式图片( wid = 600)。

（该推荐根据我们对特定尺寸图像的测试数据所得出，且随着图像尺寸大幅增加/减少而发生变化。我们计划很快会将AVIF和智能成像结合使用，从而利用Adobe Sensei功能来完成自动计算。）

在图片视觉效果一样的情况下，AVIF与WebP相比，提升了20%的压缩性能；WebP与JPEG相比，提升了27%的压缩性能。总的来说，AVIF比JPEG平均多压缩了41%的图片大小，在下面的样例2图片中，我们甚至多压缩了76%。

我们将WebP、AVIF和PNG进行对比，结果发现，使用WebP提升84%的压缩性能，使用AVIF可以提升87%的压缩性能。由于WebP和AVIF也都支持透明图片和多图片动图，所以它们是透明PNG格式图片和GIF动图的一个很好的替代方案。

总而言之，这些新的图片格式真正解锁了压缩图片愈加强大的功能。在保证相同的图片质量的前提下，WebP的图片大小平均减少了27%；AVIF则在此基础上进一步减少了20%的大小，并且能够在较低的质量水平下，保证图片的视觉质量。换句话说，在这个分辨率不断提高的时代，它还可以提供更高质量的图像。

AEM Dynamic Media的智能成像功能也可以应用于AEM网站，它将使网站轻量化和加载速度更快，从而提升网站的性能。