需要更快的页面速度?了解WebP和AVIF两种现代图像格式

WebP和AVIF两种现代图像格式

“一张图片胜过千言万语”,这句流传了一个世纪的格言依然有其道理。

事实上,当网站可能成为企业家与目标受众的唯一连接点时,图片对于讲述你的故事可能比以往任何时候都更为重要。

这就引出了一个问题: 你的图像说明什么?

它是否加载快速、清晰,给人留下现代印象,并将购物者拉入您的转化漏斗?

还是您的图片有点模糊或速度偏慢,导致访问者怀疑您的品牌是否值得信赖–以及他们是否应该点击进入竞争对手的网站?

小型企业网站的性能、成功和用户体验在很大程度上取决于现代图片格式。而升级你的网站可能比你想象的要容易得多。

在本指南中,我们将探讨什么是现代格式、如何选择最适合你的格式、一个只需点击几下就能实现这一切的 WordPress 插件,最后是一个关注网站性能的策略,以确保你与当代消费趋势保持一致。

了解WebP和AVIF图像

WebP 格式于 2010 年问世,在 JPEG 图像格式的基础上进行了改进,在不增加文件大小的情况下提供了卓越的质量和可压缩性。

它支持有损压缩(大幅减小尺寸,同时将质量损失降到最低)和无损压缩(无质量损失),从而在保持视觉清晰度的同时减小文件尺寸。WebP 还能处理透明度(如 PNG)和动画(如 GIF)等功能。

由于其高效性、多功能性以及与所有现代浏览器的兼容性,WebP 已成为一种常用格式

AVIF (AV1 图像文件格式)于 2019 年推出,提供比 WebP 更好的图像质量和压缩效果。由于采用了先进的图像压缩技术并能生成更丰富的色彩,它能以最小的文件大小提供更高质量的视觉效果。

虽然 AVIF 文件由于更年轻,还没有像 WebP 那样被广泛采用,但随着越来越多的平台开始接受这种格式,它的受欢迎程度也在不断提高。

总而言之, JPEG 和 PNG 图像都是较老的格式,文件大小较大,因此加载速度较慢。WebP 和 AVIF 格式较新,可压缩性高,因此文件更小,加载速度更快–通常不会损失太多(如果有的话)质量。

还有一件事你应该知道Modern Image Formats 是为 WordPress.org 网站开发的一个插件的名称,用于为媒体上传启用 AVIF 和 WebP 支持。

稍后,我们将向您介绍如何在自己的网站上安装该插件,以利用这些现代格式的优势。

现代格式为何重要(提示:速度!)?

图片对网站页面体积的影响很大,在 2315 KB 的总体积中,桌面图片的平均体积超过 1000 KB。这相当于近 50%!

在移动设备上,2,020 KB 中图片占了近 900 KB。

页面元素体积

由于图片占网站页面重量的大部分,因此图片的格式变得至关重要。这是因为不同的格式会极大地影响图片的大小和重量,并最终影响图片的加载时间。

您希望图片的加载速度越快越好,因为这会产生两方面的影响。

首先,它对搜索引擎优化(SEO)至关重要。

谷歌使用一种名为 Core Web Vitals 的东西,这是它衡量每个网站的一组指标,根据稳定性、响应速度和你猜对了–速度,来衡量你的网站对用户的友好程度!

它将使用您的 Core Web Vitals 以及其他因素,来决定您的网站在搜索引擎结果页面中相对于竞争对手的位置。(敬请关注,我们稍后将再次深入探讨 Core Web Vitals!)。

此外,加载速度和准确性也是客户体验的重要因素,因此会极大地影响您的转化能力。事实证明,网站速度越慢,转化率越低

Core Web Vitals

选择AVIF还是WebP

在网站上使用 WebP 或 AVIF 来提高速度之前,您需要确定您更喜欢哪种图像格式。

事实上,AVIF 和 WebP 都是适用于网络的优秀图像格式,所以选择哪种格式其实完全取决于你的优先级。

以下是我们的结论:

AVIF 保证图像质量

AVIF 非常适合清晰、细腻的图像,如摄影作品集、数字艺术或展示高端产品的电子商务网站。它能提供令人惊叹的视觉效果,同时对加载时间的影响最小。

功能多样的WebP

WebP 适用于大多数网站,能轻松处理照片、插图、Logo 和动画。WebP 支持广泛,是在网络上快速加载高质量图像的可靠选择。

实际上,我们已经撰写了一份详细的指南来帮助你做出这一决定,如果你想了解更多细节,请不要错过 AVIF vs. WebP:如何选择正确的现代图像格式

功能多样的WebP

使用Modern Image Formats插件上传最佳图片

我们前面提到的那个插件,Modern Image Formats?它可能是小型网站所有者和运营者在网上更新图片的最佳方式。

因此,让我们来探讨一下该工具的功能、安装和使用方法、它的优点以及如何确定它是否适合你。

什么是Modern Image Formats插件?

WordPress 刚于 2024 年在 6.5 版本中引入了 AVIF 支持,因此有些网站可能还没有设置好使用这种格式。

这就需要使用现代图像格式这样的插件(以前是性能实验室插件的一部分,后来分离出来,在 2024 年之前称为 WebP Uploads)。

Modern Image Formats 的创建是为了在 WordPress 中使用 WebP 和 AVIF 图像格式。只要您的主机服务器支持 AVIF,插件就会默认输出 AVIF 格式,否则就会使用 WebP 格式。如果两种格式都支持,您可以在“设置”菜单中选择您喜欢的输出格式。

快速提示:使用该插件只能对新上传的图片进行格式现代化,因此无法对网站上已有的图片进行追溯。

选择好理想的现代文件类型,准备好提升图形和网站速度了吗?太好了–让我们开始使用现代图片格式插件吧!

提醒:如果您想使用 WebP 和 AVIF 文件格式,您的主机环境也必须支持这些格式。如果您不确定是否支持,请联系您的供应商!

如何使用Modern Image Formats

与所有插件一样,您可以通过 WordPress 管理员安装 Modern Image Formats。只需登录并导航至左侧菜单中的 “插件”>“安装新插件”

安装新插件

搜索“Modern Image Formats”,点击 “立即安装”,然后等待安装完成后再点击“启用”按钮。

安装Modern Image Formats

完成后,你将被重定向到已安装插件页面,该页面按字母顺序排列。

向下滚动找到 Modern Image Formats,然后点击“Settings”。

在这里,你只需看一看,确保你喜欢所有默认设置,包括首选图像输出格式、后备图像输出等。

设置满意后,使用“保存更改”按钮。

Modern Image Formats插件设置

现在,当你上传新图片时,插件会自动将其转换为你选择的默认格式。

让我们快速发布一张图片来测试一下。我们将前往 “文章”>“写文章”,然后将一张图片拖到页面上。

发布新文章

给它取一个标题,然后点击右上角的发布按钮。在实时帖子上,将鼠标悬停在图片上,点击右键,然后检查 。你会发现图片是你喜欢的格式!

默认情况下,当你上传 JPEG 或 PNG 图片时,调整大小的版本将以 WebP 或 AVIF 等现代格式创建。不用担心,原始文件将保持原来的 JPEG 或 PNG 格式!

快速提示:使用此插件,您只能对新上传的图片进行格式现代化处理,因此无法对网站上已有的图片进行追溯处理。

Modern Image Formats插件的好处

这个插件最大的好处,也是它的全部目标,就是让所有技术背景的网站所有者都能轻松地将自己的网站带入现代。安装后,它能立即使网站兼容当今最有效的图片格式,确保快速加载、高质量和更好的体验。

其次,选择该插件的另一个主要好处是简化了格式选择。它可以根据服务器能力自动选择最佳格式。在支持 AVIF 的情况下,它会优先选择 AVIF 格式,而 WebP 则作为后备格式使用–除非你选择调整其他设置。这样,在网站管理和优化方面就少了一件麻烦事。

Modern Image Formats适合你吗?

像往常一样,我们很难说什么才是最适合你的。您用来支持小企业的工具与您的品牌、您的网站、您和/或您团队的技能组合以及您可用于上述所有方面的时间息息相关!

如果您的网站和业务的成功取决于图像,我们建议您使用该工具。这可能适用于摄影师、需要展示高质量作品样本的数字服务提供商、电子商务卖家等。

基本上,如果你的网站充满了图片,你需要注意的不仅是它们看起来很棒,而且它们不会影响你在台式机或手机上的加载速度。

如果这听起来像你的想法,那么使用一个插件也无妨,它可以让你在上传图片到网站时,更轻松地将图片快速升级为最佳和最快的格式。

使用Core Web Vitals衡量您的图片优化工作

既然您已经做出了这一重大调整,如果您还没有这样做的话,那么现在就应该开始关注您的核心网站生命指数得分,以了解它们对网站性能的影响。

提醒您,这是一组指标:谷歌对网站进行跟踪,以帮助确定网站的可用性并为谷歌搜索者进行排名。

Core Web Vitals

以下是确定核心网站活力分数的三种方法,可用于跟踪和提高网站性能:

  • PageSpeed Insights:访问 Google PageSpeed Insights,输入您的网站 URL,然后单击Analyze分析)。它将提供移动和桌面 Core Web Vitals 分数以及改进建议。
  • Chrome 浏览器用户体验报告:前往Google Search Console>Core Web Vitals>Experience,了解真实访客与网站的交互情况。
  • Web Vitals Chrome 浏览器扩展: 将 Web Vitals Chrome 扩展添加到 Chrome 浏览器,可直接从您访问的任何网站即时访问 Core Web Vitals 分数。

小结

好了,好了,在我们结束之前还有一件事。我们一直在撰写关于小型企业网站的文章,因此我们已经积累了大量关于提高网站速度的资源。

对于那些想尽一切办法通过提高网站速度来提升销售额和客户体验的人来说,这里有几篇文章值得一读:

同样重要的是,网站托管与速度也有很大关系!

超载的服务器、遥远的服务器、有限的带宽、简陋的基础设施–所有这些劣质主机的特点都会严重降低网站的速度,无论你如何优化图形都无济于事。

评论留言