缙哥哥的博客
与你分享我的点点滴滴生活

随着WP和各大CDN对Webp支持,考虑下使用Webp图片格式

WP Tutor LMS 在线课程终身授权 299元

Webp 图片格式出来很久了,但是缙哥哥一直没有跟进。原因是之前有些浏览器还不能完美兼容,免费 CDN 服务商也不支持 Webp 的缓存加速,以及 WordPress 也并不支持该格式上传。随着 WordPress 5.8 版本发布,增加对 WebP 的支持,缙哥哥也考虑将 Webp 图片列入博客优化计划。

随着WP和各大CDN对Webp支持,考虑下使用Webp图片格式
该图为通过 TinyPNG 图片压缩之后的 Png 格式

还在思考

不过在此之前,还有考虑几个问题:

  • 清晰度问题:虽然 Webp 的压缩比例很高,但是博客所有图片都已经通过压缩,图片压缩之后与原图的比较是否有明显的差别,这就需要三者详细对比。
  • 费用问题:由于目前博客全年的支出就只有一个阿里云学生机 + org域名费用,也就两百来块钱,而阿里云OSS不仅需要存储费用,真用起来还有处理费用、请求费用、流量费用,所以能省则省,尽量以免费的目的去思考整件事。
  • 替换简易度:虽然阿里云可以直接对图片进行处理并加速,但是需要钱。那么在免费的情况下,如何对整站所有图片进行替换,这需要考虑。是批量对 png、jpg、jpeg 等格式转换成 Webp 格式,再使用《WordPress 使用SQL语句批量替换/修改文章信息》,对所有图片地址进行修改。还是在某个时间节点开始,之后的全部用 Webp 格式图片。
  • CDN 规则:真替换之后,还需要在 CDN 的缓存规则中增加(确认)对 Webp 格式的支持,千万别忘记导致服务器资源(对象存储请求、流量费用)暴涨
  • 原有数据处理:原有的图片尽量做一个备份,以防万一。

最后说两句

全站改 Webp 格式很容易,最纠结的是清晰度,就拿本文配图为例。png 图片格式通过 TinyPNG 图片压缩之后,清晰度明显比 80% 质量的 Webp 图片格式要清晰,虽然 Webp 只有压缩后的 png 图片大小的一半,但是中间绿色圈圈的锯齿明显要多一些。而如果设置 100% 质量,反而比 png 要大了五倍。

该图为通过 Webp 压缩之后的 Webp 格式图片

上面放上一张 Webp 格式图片作为对比,供小伙伴参考。

赞(5) 打赏
转载请注明来源及链接:缙哥哥 » 随着WP和各大CDN对Webp支持,考虑下使用Webp图片格式
如需 WordPress 优化加速、二次开发、托管等服务,可联系我购买付费服务:点此联系我 | 近期站内热门福利:

评论 10

评论前必须登录!

 

  1. #4

    webp支持静态图片和动态图片和有声动态图片

    wc9157602151年前 (2021-11-21)
    • 这么牛批的吗?我反正目前不会去用webp

      缙哥哥1年前 (2021-11-21)
      • 但webp有声动态图片占用资源大,假如一个10MB的mp4视频转webp,可能占用要50MB了

        wc9157602151年前 (2021-11-22)
        • 那有毛用,还不如mp4

          缙哥哥1年前 (2021-11-22)
  2. #3

    webp感觉更适合jpg压缩?

    cher1年前 (2021-09-25)
    • 可能是的,但是我自己平时用的png,有时候要用透明图片。

      缙哥哥1年前 (2021-09-25)
  3. #2

    可能图片站更需要这个东西,博客感觉稍微压缩压缩就好了

    HONG1年前 (2021-09-22)
  4. #1

    其实Webp格式没有传说中那么的强大和必要!

    cpublic1年前 (2021-09-20)

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册