当前位置:首页>网络教程>其他教程>wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式

wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式

WebP & AVIF  速度需求 网页速度用来衡量网页加载内容的速度。通常,网站的...

文章目录[隐藏]

  • WebP & AVIF 
  • 速度需求
  • 位于山峰,即使孤独,也不虚此行
  • WebP的出现
  • 为AVIF文件格式开路
  • 在AEM Dynamic Media智能成像中支持WebP和AVIF
  • 基于AEM网站的AEM Dynamic Media
  • 对比几种图片格式

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值差不多。

wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式

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

wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式
wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式
wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式
wordpress教程:AVIF比 WebP 压缩还高 30% 的图片格式
压缩结果

根据我们的实验结果,在使用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网站,它将使网站轻量化和加载速度更快,从而提升网站的性能。

给TA打赏
共{{data.count}}人
人已打赏
其他教程网络教程

win10好用软件推荐:几个小众冷门的软件一般人不知道

2022-7-19 12:07:34

其他教程网络教程

WordPress支持 WebP格式的图片:6.0 版本默认启用 WebP

2022-7-19 12:08:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索