图片优化之下一代图片格式WebP和AVIF

点击上方“LiveVideoStack”关注我们

本文最初由 Karanjeet Singh 在 Adobe Tech Blog上发表。已获作者授权翻译和发布。

原文网址：

https://medium.com/adobetech/image-optimisation-with-next-gen-image-formats-webp-and-avif-248c75afacc4

翻译：姜金元

审校：LiveVideoStack特邀技术审校

编辑：Alex

WebP & AVIF

 影音探索

#002#

 

 速度需求

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

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

  

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

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

 

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

 

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

 WebP的出现

JPEG/PNG 是目前最常用的图片格式（几乎所有浏览器都支持），它们已经出现了将近20年。而WebP 则是一种现代的图片格