使用ShortPixel为你的WordPress配置WebP图片。

图像优化一直是WordPress速度优化的重点,除了传统的图片压缩外,还有一种新的方法就是采用WebP,不过WordPress本身并未添加对WebP的支持,所以我们就需要配合第三方插件来实现WebP方案,今天我们分享的就是如何使用ShortPixel插件为你的WordPress站点配置WebP格式图片

WebP图像的特点

使用ShortPixel为你的WordPress配置WebP图片。

关于WebP图像的特点,其实网络已经有很多介绍,本文就不再详细叙述,我们主要知道2个点就行

  1. WebP格式体积更小,图像大小相比传统格式大大减小
  2. WebP并未被完全支持,目前支持WebP图片的有Chrome、Opera、Android浏览器

虽然说还有很多浏览器并未支持,但是WebP图像一定是未来的趋势

生成WebP格式图像

WebP和JPG、PNG一样,都是一种图像格式,所以我们想要使用WebP图片,必定要先生成对应格式的图像,在本文中我们将使用ShortPixel插件来生成,如果你还未使用过这款插件,强烈建议查看我们关于ShortPixel的介绍,并配置好自己的选项

打开ShortPixel的设置项,选择 Advanced – WebP versions,勾选 Create also WebP versions of the images for free,也就是说压缩图片的同时自动生成WebP图像,这样以后的图片就没问题了

还有就是之前并未压缩以及生成WebP的图片,可以通过 媒体 – Bulk ShortPixel 来进行批量压缩与生成

将网页图片替换成WebP格式

图片都生成WebP格式以后,有的朋友会发现,网页并没有任何变化

没有变化就对了,因为我们只是增加了文件,在网页代码方面并没有更改,接下来教大家设置ShortPixel

继续回到刚刚的 ShortPixel – Advanced – Generate WebP markup,勾选该选项,该选项只是对内容进行过滤,并不会修改真正的代码,可以随时关闭

使用ShortPixel为你的WordPress配置WebP图片。

这个选项会为图片生成Picture标签,这样做的好处就是可以同时兼容支持与不支持WebP的浏览器,支持的浏览器比如Chrome,会直接使用WebP图像;不支持的比如Edge,就会使用原始图片格式

检测WebP是否成功

在所有的工作完成以后,我们当然要检测一下是否成功开启WebP图像

这里我说一个最简单的方法,使用Chrome打开网页,找到图像右键 – 另存为,看图像的后缀是否为.webp,如果是的话,恭喜你开启成功,否则的话则需要检查是否有错误

我们查看如下的测试,可以看到WebP网页比非WebP网页的图像体积整整减少了一半,注意,这些原始图片都是已经压缩过的,所以,如果你没有使用其他压缩插件的话,提升将会更加明显

使用ShortPixel为你的WordPress配置WebP图片。

使用ShortPixel为你的WordPress配置WebP图片。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/112894.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2022年10月25日 01:32
下一篇 2022年10月25日 01:33

相关推荐

  • WordPress配置Redis缓存教程。

    WordPress速度一直是许多人关注的问题,我们除了可以使用缓存插件外,还可以配合对象缓存来进一步提升网站加载速度,最常用的有Memcached和Redis,之前WP主题站已经给大家介绍过WordPress配置Memcached方法,在本文…

    2022年10月25日 wordpress开发
    036
  • 使用宝塔本地安装wordpress测试站点。

    大多数情况下,我们会直接在云服务器上使用WordPress建站,因为非常的方便,也不需要太多的调试。不过有些时候我们会有一些特殊的需求,比如测试插件、主题、二次开发等,这些操作不适合在正式环境中进行,这时候我…

    2022年10月25日 wordpress开发
    023
  • 关于wordpress 爆出的 WP_Image_Editor_Imagick 漏洞临时解决方法

    今天收到了阿里云推送的一条短信通知,内容大概是:“【阿里云】尊敬的用户:您的服务器XXX.XX.XXX.XXX存在wordpress WP_Image_Editor_Imagick 指令注入漏洞,已为您准备补丁可一键修复漏洞,为避免被黑客入侵,建议…

    2016年5月14日
    0229
  • WordPress添加网站内容复制版权提示。

    在许多网站中,我们会发现如果复制器内容的话,会弹出一个窗口提示转载注明出处,这样就不会有人随意转载,今天就介绍下如何使用一段代码为Wordpress添加复制弹窗提示 首先将如下的代码中copyNoticeString的文字提…

    2022年10月24日
    023
  • 用WP Downgrade降级WordPress版本。

    我们都知道WordPress是一直在升级的,不断添加新功能和增加安全性,大部分时候我们都应该升级保持最新版,但有时候会出现插件或主题不兼容地情况,如果问题比较严重的话,就需要回退WordPress到上一个版本,今天来…

    2022年10月25日 wordpress开发
    029
  • WordPress安装旧版本插件方法(插件降级)。

    有时候我们更新插件后会出现一些错误,或者不能使用,等待开发者修复的话可能需要一些时间,如果这款插件比较重要的话,那么最好就是先安装到旧的版本,今天我们就介绍下如何为WordPress安装旧版插件 到WordPress官…

    2022年10月25日 wordpress开发
    025
  • WordPress添加自定义CSS代码的几种方法。

    在定制WordPress站点时,除了可以使用主题的选项调整外,CSS代码也是我们常用到的一种方法,不管是修改样式、调整距离还是隐藏特定元素,我们都可以用CSS来完成,而且很多时候主题没有的功能,你询问作者它也会给出…

    2022年10月25日
    037
  • Simple Slug Translate 把WordPress固定链接自动翻译成英文。

    默认情况下, 如果你在固定链接中添加了文章名, WordPress就会使用标题中文作为固定链接,如果想要使用英文的URL,就需要手动更改链接地址,但是有时候我们就是懒得弄这些,该怎么办呢? 今天为大家介绍一款插件 – …

    2022年10月24日 wordpress开发
    023

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息