如果您想加快WordPress网站的速度,寻找减小图像大小的方法可以为您带来丰厚的投资回报。
#js-mykinsta-video {
背景图片:url(https://kinsta.com/wp-content/themes/kinsta/images/mykinsta-dashboard-v8@2x.jpg);
}
免费试用
平均而言,图片约占网页文件大小的一半,因此,即使是很小的改进也可以取得很大的效果。
WebP是一种现代的图像格式,可以帮助您减小图像的大小而不改变其外观。平均而言,学习如何将图像转换为WebP可以将其尺寸缩小〜25-35%,而不会造成质量损失。
因此,我们将在此博客文章中深入探讨该主题!
准备?让我们开始吧!
什么是WebP?
那么……什么是WebP文件?简而言之,WebP是Google开发的一种图像格式。例如,您具有JPEG或JPG和PNG等图像格式,对吗? WebP是图像的另一种文件格式。
WebP致力于提供相同的图像文件,只是文件尺寸较小。通过减少图片文件的大小,您仍然可以为网站的访问者提供相同的体验,但是网站的加载速度更快。
例如,在Google的WebP压缩研究中,Google发现一个WebP图像文件平均…
- 比同类JPEG图像小25-34%。
- 比类似的PNG图像小26%。
这就是为什么如果您通过PageSpeed Insights运行站点,许多建议之一就是以WebP之类的下一代格式提供图像:
那么Google的WebP格式如何实现这些文件大小的减小?
WebP支持有损和无损压缩,因此确切的减少取决于您使用的是有损还是无损压缩
通过有损的WebP压缩,WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图像中相邻像素的值来预测值,然后仅对差异进行编码。它基于VP8关键帧编码。
无损WebP使用WebP团队开发的一套更为复杂的方法。
如果您想详细了解WebP压缩技术,则本文是一个很好的起点。
哪些Web浏览器支持WebP?
为了使WebP图像起作用,访问者的网络浏览器需要对其进行支持。不幸的是,尽管浏览器支持已经增长很多,但WebP兼容性仍然不是通用的。
流行的浏览器支持WebP图像,例如:
- Chrome(台式和移动)。
- Firefox(台式机和移动版)。
- 边缘。
- Opera(台式机和移动机)。
但是,值得注意的是Safari。在撰写本文时,Safari的桌面版和移动版均不支持WebP图像。 Apple在2016年短暂地尝试了WebP对Safari的支持,但此后没有再做任何努力。
Internet Explorer也缺少WebP支持(但Edge确实支持WebP,因为它基于Chromium)。
总计,大约77%的Internet用户使用支持WebP的浏览器。因此,尽管肯定有多数支持,但23%的支持太大了,不容忽视(在下面的WordPress WebP教程中,我们将向您展示如何处理此问题,以便所有访问者都拥有很好的体验):
WebP,JPG,PNG大小比较
根据Google的测试,WebP图像为:
- 比同类JPEG图像小25-34%。
- 比同类PNG图片小26%。
如果您想进一步了解Google的方法,可以在下面找到指向完整结果的直接链接:
- JPEG格式
- PNG
两项测试均基于超过11,000张图像,包括:
- 著名的伦纳图像
- 来自柯达真彩色图像套件的24张图像
- 来自Tecnick.com的100张图片
- 来自Google图片搜索的11,000多张图片的随机样本
如何在WordPress上使用WebP图像
由于并非所有浏览器都支持WebP图像,因此您不能像在JPEG和PNG中一样,仅在媒体库中上传WebP图像文件并直接在WordPress中使用它们。
使用WordPress,我们的流量增长了1,187%。
我们将向您展示如何。
加入20,000多个其他人,他们每周都会收到有关WordPress内部技巧的新闻!
现在订阅
成功!感谢您的订阅
您将在一周内收到下一期的Kinsta新闻通讯。
订阅Kinsta新闻通讯
订阅
我同意条款和条件以及隐私政策
同样,有23%的人(包括所有Safari用户)使用的网络浏览器不支持WebP。如果您转换WebP图像并直接在您的内容中使用它们,则这些访问者将无法看到您的图像,这将破坏他们的浏览体验。
不用担心,有解决方案!
您可以使用WordPress插件,而不是将WebP图像直接上传到WordPress,而是将您的原始图像转换为WebP格式,并在访问者的浏览器不支持WebP的情况下提供原始图像作为备用。
例如,如果您将JPEG文件上传到您的网站,则该插件将:
- 将JPEG文件转换为WebP,并使用WebP版本供访问者使用Chrome,Firefox等浏览。
- 向使用Safari和其他不支持WebP的浏览器浏览的访问者显示原始JPEG文件。
这样,每个人都可以看到您的图像,并且每个人都可以获得最快的体验。
下面,我们将介绍一些最佳的WebP WordPress插件,所有这些插件都可与Kinsta和Kinsta CDN一起使用。
信息
如果您在Kinsta托管,则需要获得我们的支持,以便我们可以为其中一些插件的WebP缓存桶创建Nginx规则。
短像素
ShortPixel是一个流行的WordPress图像优化插件,可以帮助您自动调整大小并压缩上传到WordPress网站的图像。
作为其功能列表的一部分,ShortPixel还可以帮助您自动将图像转换为WebP并将这些图像提供给支持WebP的浏览器。
ShortPixel有一个有限的免费计划,可让您每月免费优化约100张图像。在那之后,付费计划的起价为每月4.99美元(最多5,000张图片/学分),或一次9.99美元(一包10,000学分)。
ShortPixel会将您优化过的每个WordPress图像尺寸计算在内。因此,如果您要优化多个图像缩略图的大小,则可以想象一张图像可以使用多个字幕。图像没有文件大小限制。
您可以在不受限制的网站上分配您的ShortPixel积分-没有针对每个站点的限制(您的所有网站都可以使用相同的ShortPixel帐户)。
要使用ShortPixel在WordPress上提供WebP图像,您需要从WordPress.org安装插件并添加您的API密钥(您可以通过注册免费的ShortPixel帐户获得)。
在“常规”选项卡中,您可以设置图像优化工作方式的基本设置。例如,使用哪种压缩级别以及是否调整图像大小:
要启用WebP图像,请转到“高级”选项卡,然后:
- 选中“ WebP图像”框
- 选中提供WebP版本的框。(选中第一个框后出现)
- 选择单选按钮以使用
- 保留默认的“仅通过WordPress挂钩”选择
然后,保存您的更改。
如果您在Kinsta托管,ShortPixel将为您提供有关在Nginx上配置服务器配置文件的警告消息。要配置这些设置,您可以联系Kinsta支持,我们很乐意为您设置服务器配置。
想像一下
Imagify是与WP Rocket相同的开发人员开发的流行图像优化插件(这是与Kinsta配合使用的少数缓存插件之一)。
它可以自动压缩和调整您上传到WordPress网站的图像的大小。然后,它还可以帮助您将它们转换为WebP,并通过支持WebP的浏览器将WebP版本提供给访问者。
在功能方面,ShortPixel和Imagify具有许多相似之处。当您查看价格时,最大的不同是。 ShortPixel会根据图像对您收费,每张图像没有大小限制,而Imagify会根据文件总大小而收费,没有图像限制。
因此,如果您需要优化大量大图像,ShortPixel的方法可能会更便宜。但是,如果您需要优化许多小图像,那么Imagify的方法可能会更便宜。
Imagify的免费套餐有限,每月可以进行25 MB的优化。之后,付费计划的起始费用为每月4.99美元(最多1 GB)或9.99美元(一次性的1 GB信用)。
与ShortPixel一样,您可以将帐户限制分散到无限的网站上。
厌倦了您的WordPress网站的缓慢主机?我们提供WordPress专家提供的快速服务器和24/7世界一流的支持。查看我们的计划
要使用Imagify交付WordPress WebP图像,您需要从WordPress.org安装插件并添加API密钥以开始使用。
激活插件后,您可以使用“常规设置”框选择压缩级别。
要启用WebP图像,请向下滚动到“优化”部分,然后找到“ WebP格式”部分:
- 选中创建图像的WebP版本的框
- 选中以Webp格式显示图像的框…
- 选择单选按钮以使用
- 如果您是在Kinsta托管并使用Kinsta CDN,请在“如果使用CDN”框中输入Kinsta CDN的网址(我们将在下面告诉您如何找到Kinsta CDN网址)
如果您使用的是Kinsta CDN,则可以通过在MyKinsta仪表板中打开网站并访问网站设置的Kinsta CDN标签来找到您的CDN URL:
与ShortPixel一样,如果您在Kinsta托管,则需要为WebP缓存存储区创建Nginx规则(只需联系Kinsta支持)。
擎天柱
Optimole是一个WordPress图像优化插件,其操作与Imagify和ShortPixel略有不同。 Optimole可以自动压缩图像并调整其大小。但是,它还具有其他两个显着功能:
- 它可以通过自己的CDN(由Amazon CloudFront支持)来提供图像。
- 它提供实时的自适应图像,Optimole将为每个访客提供最佳尺寸的图像。例如,与在Retina屏幕上浏览的人相比,在小屏幕上浏览的人将获得较低分辨率的图像。
这种方法类似于其他实时优化/操纵服务,例如Cloudinary,imgix,KeyCDN图像处理等。
作为实时图像优化的一部分,Optimole还可以使用支持WebP的浏览器向访问者提供WebP图像。
Optimole有一个有限的免费计划,该计划每月可以处理大约5,000个访问者的图像。之后,付费计划的起价为每月19美元,可容纳约25,000名访客。
首先,您需要从WordPress.org安装该插件,并使用API密钥(可以通过注册免费的Optimole帐户获得)来激活它。
完成此操作后,Optimole将开始自动优化图像并通过其CDN交付图像。默认情况下,WebP支持处于启用状态,因此无需手动启用它。
要配置其他设置,例如压缩级别和缩放行为,可以转到媒体→Optimole→设置:
由于Optimole可以通过自己的CDN传送图像,因此,如果您在Kinsta托管,则无需设置任何Nginx规则。
提高⬆️网站速度,同时减小⬇️图像大小。了解如何在#WordPress网站上利用WebP格式?
点击鸣叫
摘要
WordPress网站的图片在平均页面的文件大小中占很大一部分。如果您找到减小图像大小的方法,则可以在不改变访问者体验的情况下加快网站速度。
WebP是一种现代图像格式,与比较的JPEG或PNG文件相比,可以将文件大小减少约25%。
大多数现代浏览器都支持WebP,大约77%的Internet用户使用的浏览器支持WebP。但是,某些浏览器(尤其是Safari)仍然不提供WebP支持,因此您不能向所有访问者提供WebP图像。
为解决此问题,您可以使用WordPress插件,将图像转换为WebP并向浏览器支持此格式的访问者提供WebP版本,而将原始图像用于其浏览器不支持此格式的访问者。
可以帮助您完成此操作的三个插件是:
- ShortPixel。
- 想像一下
- Optimole。
有关优化图像的更多策略,请查看我们的完整指南,以优化图像以提高网络性能。
您对在WordPress上使用WebP有任何疑问吗?在评论中询问我们。
如果您喜欢这篇文章,那么您会喜欢Kinsta的WordPress托管平台。加速您的网站,并从我们经验丰富的WordPress团队获得24/7支持。我们基于Google Cloud的基础架构专注于自动扩展,性能和安全性。让我们向您展示Kinsta的与众不同!查看我们的计划