最新公告
  • 欢迎您光临IO源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 如何实现WordPress网站使用WebP格式图片

    webp-1024x512-1

    提升WordPress网站的加载速度的其中一种办法——减少图片体积大小。平均而言,图片约占网页文件大小的一半,因此即使是很小的改进也可以取得很大的效果。

    WebP是一种较新的图片格式(相比jpg和png),该格式的最大特点是减小图片体积大小而不影响质量。将图片转换为WebP格式可以将其尺寸缩小约25-35%,而不会造成质量损失。

    我们将在此文中深入探讨该主题!

    1. 什么是WebP?
    2. 哪些浏览器支持WebP?
    3. WebP vs JPG vs PNG体积大小比较
    4. 如何在WordPress网站上使用WebP图片

    什么是WebP?

    那么……什么是WebP文件?简而言之,WebP是Google开发的一种图片格式。我们更为常见的图片格式是JPEG或JPG和PNG,WebP则算得上后起之秀。

    WebP致力于提供相同质量的图片,但文件尺寸较小。通过减少图片文件的大小,而不会“降低图片呈现质量导致糟糕用户体验”,并且有利于网站加载速度提升。

    在Google的WebP压缩研究中,Google发现平均一个WebP图片文件…

    • 比JPEG图片小25-34%。
    • 比PNG图片小26%。

    这就是为什么如果您通过PageSpeed Insights运行网站测试,会看到采用WebP等下一代格式提供图片

    Google PageSpeed Insights建议使用WebP格式图片

    Google PageSpeed Insights建议使用WebP格式图片

    那么Google的WebP格式如何实现文件大小减少?WebP支持有损和无损压缩,因此确切的减少取决于您使用的是有损还是无损压缩。

    通过有损的WebP压缩,WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图片中相邻像素的值来预测值,然后仅对差异进行编码。它基于VP8关键帧编码。

    无损WebP使用WebP团队开发的一套更为复杂的方法。如果您想详细了解WebP压缩技术,那么可以阅读谷歌相关文档。

    哪些浏览器支持WebP?

    为了使WebP图片起作用,需要Web浏览器兼容才行。不幸的是,尽管越来越多的浏览器开始兼容WebP,但WebP兼容性仍然不是通用的

    当前主流浏览器一般都支持WebP图片(冥顽不灵的IE依然是不支持的,也可能因为它不是开源的),例如:

    • Chrome(PC&移动版)
    • Firefox(PC&移动版)
    • Edge
    • Opera(PC&移动版)

    值得注意的是Safari,Safari的桌面版和移动版均不支持WebP图片。Apple在2016年曾尝试Safari兼容WebP的开发,但此后就渺无音讯了。

    Internet Explorer也不兼容WebP(Edge支持WebP,因为它基于Chromium)。

    总计,大约77%互联网用户使用支持WebP的浏览器。但23%的数字太大了,不容忽视(在下面的WebP教程中,将会详细说明如何处理此问题,以便所有访问者都拥有良好的体验):

    WebP支持

    WebP支持

    WebP vs JPG vs PNG 体积大小比较

    根据Google的测试,WebP图片为:

    • 比JPEG图片小25-34%
    • 比PNG图片小26%

    如果您想进一步了解Google的方法,可以阅读谷歌关于WebP的一些说明资料:Lossless and Transparency Encoding in WebP,WebP Compression Study。

    两项测试均基于超过11,000张图片,包括:

    • 著名的Lenna标准测试图片
    • 24张柯达真彩色图片
    • 100张Tecnick.com图片
    • 11,000多张Google图片搜索的随机样本

    如何在WordPress上使用WebP图片

    由于并非所有浏览器都支持WebP图片,因此,您不能像JPEG和PNG那样,直接通过媒体库上传WebP图片文件并直接使用。

    同样,23%的互联网用户(包括所有Safari用户)使用不支持WebP的浏览器。如果一刀切的方法所有图片格式换成WebP,则此类访客将无法看到您的网站图片,结果可想而知。

    但无需担心,有问题自然就有对应的解决方案!

    您可以使用WordPress插件,而不是将WebP图片直接上载到WordPress,而是将您的原始图片转换为WebP格式,并在访客浏览器不支持WebP时提供原始图片作为备用。

    例如,如果您将JPEG文件上传到您的网站,则该插件:

    • 将JPEG文件转换为WebP,并使用WebP版本供使用Chrome,Firefox等浏览器访问者浏览。
    • 向使用IE、Safari和其他不支持WebP的浏览器的访问者显示原始JPEG文件。

    这样,每个人都可以查看网站图片,并且保证了77%的访客获得更佳的网站加载体验。下面,将介绍一些优秀的WebP图片插件。

    1. ShortPixel
    2. Imagify
    3. Optimole

    ShortPixel

    WordPress插件-ShortPixel

    WordPress插件-ShortPixel

    ShortPixel是一个非常热门的WordPress图片优化插件,可以帮助您自动调整图片大小并压缩上传到WordPress网站。作为其功能列表的一部分,ShortPixel还可以自动将图片转换为WebP并将这些图片提供给支持WebP的浏览器。

    ShortPixel提供了一个基础的免费计划,每月免费优化约100张图片。在那之后,付费套餐的起步价为4.99美元/月(5,000张图片),或单次付费9.99美元(10,000图片)。

    您可以在任意网站上分配ShortPixel图片优化额度-没有站点限制(并且您的所有网站都可以使用相同的ShortPixel帐户)。

    要在你的WordPress网站使用ShortPixel,您需要从WordPress.org安装插件并添加API密钥(您可以通过注册免费的ShortPixel帐户获得)。

    在“ General 选项卡中,您可以设置图片优化工作方式的基本设置。例如,使用哪种压缩级别以及是否调整图片大小:

    ShortPixel插件设置

    ShortPixel插件设置

    要启用WebP图片,请转到“Advanced ”选项卡,然后:

    1. 勾选“WebP Images”框
    2. 勾选Deliver the WebP versions.. (选中第一个框后出现)
    3. 选中Using the <PICTURE> tag syntax单选按钮(在选中上一个框后显示)
    4. 保留默认的“Only via WordPress hooks selection”。

    ShortPixel插件启用WebP图片支持

    ShortPixel插件启用WebP图片支持

    最后,保存您的更改。

    Imagify

    WordPress插件-Imagify

    WordPress插件-Imagify

    Imagify是另一款热门图片优化插件,为著名WordPress缓存优化插件WP Rocket开发人员所开发。

    它可以自动压缩和调整您上传到WordPress网站的图片的大小。然后,还可以将图片转换为WebP,并将WebP版本提供使用支持WebP的浏览器的访问者。

    在功能方面,ShortPixel和Imagify有许多相似之处。最大的不同是。ShortPixel按图片数量计费,图片大小则无限制;而Imagify会根据文件总大小收费,但无图片数量限制。

    因此,如果您需要优化大量大图片,ShortPixel的计费方式可能更合适你。相反,如果您需要优化许多小图片,则Imagify的计费方式可能更划算些。

    Imagify的免费套餐感觉“在侮辱用户”,每月仅支持25MB的图片优化。之后,付费方式为4.99美元/月(最多1GB)或单次付费9.99美元(最多1GB)。

    与ShortPixel一样,Imagify也支持在无限网站使用,反正是按量付费,管你在几个网站上用。

    要使用Imagify插件使WordPress网站支持WebP图片,您需要从WordPress.org安装插件并添加API密钥激活使用。

    启用插件后,进行插件设置界面选择“General Settings”进行WebP优化设置。

    Imagify插件设置

    Imagify插件设置

    要启用WebP图片,请向下滚动到“Optimization ”部分,然后找到“WebP Format”部分:

    1. 勾选“Create webp versions of images
    2. 勾选Display images in webp format…
    3. 选择单选按钮“use <picture> tags
    4. 如果你的WordPress网站使用了CDN,则还需要在“If you use a CDN box”输入框填入CDN服务商提供的属于你网站的CDN加速地址URL。

    Imagify启用WebP图片优化设置

    Imagify启用WebP图片优化设置

    Optimole

    WordPress插件-Optimole
    WordPress插件-Optimole

    Optimole是这次要介绍的第三个WordPress图片优化插件,其操作与Imagify和ShortPixel略有不同。Optimole可以自动压缩图片并调整其大小。但是,它还提供其他两个显着功能:

    1. 它可以通过自己的CDN(由Amazon CloudFront支持)来提供图片。
    2. 它提供实时的自适应图片,Optimole将为每个访客提供最佳尺寸的图片。

    这种方法类似于其他实时优化服务,例如Cloudinary,imgix,KeyCDN图片处理等。

    作为实时图片优化的一部分,Optimole向支持WebP的浏览器提供WebP图片。

    Optimole也提供免费套餐,每月可以处理大约5,000个访问者的图片。之后,付费套餐起步价为19美金/月,支持25,000名访客。

    首先,您需要从WordPress.org安装插件,并使用API​​密钥激活该插件(可以通过注册免费的Optimole帐户获得该密钥)。

    完成后,Optimole将开始自动优化图片并通过其CDN为访客提供图片。WebP支持默认情况下处于启用状态,无需手动启用。

    当然你还想执行其他设置,例如压缩级别和缩放,可以转到“媒体→Optimole→Settings”:

    Optimole插件设置 Optimole插件设置

    小结

    很多时候,WordPress网站中占据页面体积的大比例的,非图片莫属。如果页面图片过多且体积过大,建议应该考虑对图片进一步优化以提升网站页面的加载速度。

    WebP作为新一代的图片格式,与较为经典的JPEG或PNG文件相比,可以将文件大小减少约25%。

    现在大多数现代浏览器都支持WebP(大约77%互联网用户使用支持WebP的浏览器),但是,某些浏览器(尤其是Safari和IE)仍不提供WebP支持,又不能为所有访问者提供WebP图片。

    要解决此问题,建议使用WordPress插件,将图片转换为WebP并向其浏览器支持此格式的访问者提供WebP版本,而对那些不支持该格式的访问者使用原始图片。推荐以下三个插件:

    • ShortPixel.
    • Imagify.
    • Optimole.

    以下为WordPress图片优化相关文章,参考阅读:

    1. 详解如何优化压缩WordPress博客图片
    2. 如何优化WordPress博客图片?
    3. 如何实现WordPress图像和视频懒加载
    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!384324621@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有★币奖励和额外收入!

    IO 源码网 » 如何实现WordPress网站使用WebP格式图片

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    IO源码吧
    一个高级程序员模板开发平台

    发表评论

    • 158会员总数(位)
    • 12111资源总数(个)
    • 92本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情