威言威语
我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

启用WebP格式图片

最近给博客启用了WebP格式图片,如果有WebP格式的图片就展示WebP图片,没有就展示原来的图片。经过比较,最后选择了Images to WebP来实现这个功能。WebP是一种由 Google 开发的现代图像格式,与 PNG 和 JPEG 相比,图像格式能够将文件大小减少30%左右。目前webp可以通过PhotoShop或者Imagine来转换。

最近给博客启用了WebP格式图片,如果有WebP格式的图片就展示WebP图片,没有就展示原来的图片。

WebP格式图片相信大家都有一些了解,它是一种由 Google 开发的现代图像格式。WebP 图像格式在不牺牲质量的情况下减小了图像的大小。与 PNG 和 JPEG 相比,图像格式能够将文件大小减少30%左右。

现在几乎所有主流的浏览器都支持 WebP 格式了,也是时候使用WebP格式图片了。

WordPress 5.8之后就支持展示webp格式图片了,只是不能将jpg、png等格式图片转成webp格式图片。甚至原计划WordPress 6.0的时候采用 WebP 图片座位默认图片格式的方案。

我比较了目前WordPress转换webp的插件,最后选择使用Images to WebP。它配置比较简单,也没有多余花哨的功能,启用插件的时候需要在Apache或者nginx里面写入规则。

安装Images to WebP插件之后,默认上传图片它是会自动生成webp格式的图片。不过由于我的使用习惯,我从来没有使用WordPress自带的媒体功能,我正常都是自己处理好图片然后ftp上传。安装这个插件为了让那些不支持webp的浏览器能正常显示普通格式的图片。

目前只是将一些图片多的文章里面的图片新增了webp格式,比如:2021年终简单侃侃。里面有12张照片,由于服务器只有1M带宽,虽然我压缩了图片,但是首次打开的时候图片加载还是挺慢的,换了webp格式之后,图片大小又进一步进行了压缩,目前加载稍微快了一些。

正常情况下,下图大家右击另存为的图片格式应该是webp了。

WebP格式图片

如何转换webp格式

1、PhotoShop。从23.2版本开始,Photoshop将完全支持WebP文件格式。现在WebP格式可以直接在Photoshop中打开、创建、编辑和保存,无需其他插件或偏好设置。当然,如果你使用的版本低于23.2,可以下载PhotoShop的webp插件,点击去下载

2、Imagine。一个 GUI 图片压缩工具,支持 PNG 和 JPEG 格式图片的压缩和转换,并支持转换到 WebP,压缩效果实时预览和对比非常贴心。点击去下载

当然还有很多在线转换的网站,一般情况下我不太使用在线转换,不过gif动态图片转换为webp的本地软件好像没怎么找到,在线的有一个不错的,我转了一些动态gif到webp,效果都挺不错。大家也可以体验一下。GIF转WEBP

本文固定链接: https://www.weisay.com/blog/enable-webp.html | 威言威语

您可能还会对这些文章感兴趣!

启用WebP格式图片:目前有 60 条评论

  1. 27楼

    我一般都是无损压缩一下原图。

    2022-06-30 22:08 回复
  2. 26楼

    訪問量小就沒折騰了,圖床的定額也有限…

    2022-06-28 18:17 回复
  3. 25楼
    老达Google Chrome 102.0.0.0 Windows 10 x64 Edition

    你的评论区可真热闹 :cool:
    我是上个月才接触到webp格式图片(重新玩博客也才3个月),安装了一个叫Plus WebP的插件,可以把历史文章里的图片全部转换为webp格式,也支持新上传的图片自动转换。可是在wp6.0上不能用,支持吃5.8版本的。。。
    之后就只好用webp converter线下转换格式之后上传媒体库了,还是很麻烦的。
    等下去试试你说的这个插件

    2022-06-26 00:10 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @老达Images to WebP也是支持把历史图片批量更新成webp的,可以试一试。

      2022-06-26 14:51 回复
  4. 24楼

    Webp是真香呀,我去年就转webp了,自己写的转换,在上传图片时,自动将png,jpg处理成webp。

    2022-06-25 10:26 回复
  5. 23楼
    joojenMicrosoft Edge 102.0.1245.44 Windows 10 x64 Edition

    由于有丢失图片数据的精力,所以现在都是在自己服务器上,流量本身够用,就没单独配图床了。Webp格式试了几个插件,貌似都不太理想,转换比较耗费资源,就放弃了,目前还是原始展现方式,如果网站流量大了再考虑优化。

    2022-06-24 13:21 回复
    • WilliamGoogle Chrome 103.0.0.0 Windows 10 x64 Edition

      @joojen图片压缩嘛或多或少都会影响图片的清晰度,不过有一些的压缩肉眼难看出来。图片小一些加载快一些,体验就好一些,服务器资源够的倒是没必要折腾。

      2022-06-24 14:20 回复
  6. 22楼

    webp压缩是挺小的 极个别图片还是稍大 去年我就使用了webp

    2022-06-24 11:09 回复
    • WilliamGoogle Chrome 103.0.0.0 Windows 10 x64 Edition

      @灰常记忆对,我在转我们博客上的一些图片的也出现部分图片转化之后图片大小变大的情况,不过大多都变小了。

      2022-06-24 14:18 回复
      • @William 我都是提前jpg压缩然后在webp压缩

        2022-06-30 01:23 回复
        • WilliamFirefox 101.0 Windows 10 x64 Edition

          @灰常记忆我基本也是这样,用原图压一遍jpg,再用原图压一遍webp,基本不用压出的jpg再去转webp,保证webp的图片清晰度,不过基本webp压出来都比jpg小。

          2022-06-30 09:41 回复
  7. 21楼

    写博客,还得精打细算。

    2022-06-24 08:36 回复
  8. 20楼
    老麦:Safari 15.5 Mac OS X  10.15.7

    据我所知现在转webp的方法还是有很多的,哪个顺手就用哪个,wordpress上我采用图床,上传时自己的服务器是没压缩的,这样子就算出什么问题也容易解决。
    本地使用的话,谷歌的cwebp就很好用,毕竟官方出口,使用起来更顺手。

    2022-06-24 00:10 回复
    • WilliamGoogle Chrome 103.0.0.0 Windows 10 x64 Edition

      @老麦现在转换的工具确实挺多的,主要还是自己使用那个方便。cwebp有时间的话我也试试。

      2022-06-24 14:17 回复
  9. 19楼
    JustinGoogle Chrome 102.0.5005.63 Windows 10 x64 Edition

    我就比较简单粗暴了,wordpress网站我是直接在本地把JPEG、PNG格式的图片文件转换为webp格式再上传,这类工具网上一搜一大把,我目前用的是webp converter~

    2022-06-23 23:04 回复
    • WilliamGoogle Chrome 103.0.0.0 Windows 10 x64 Edition

      @Justin确实粗暴了一些,部分如IE浏览器等不支持的webp的就看不到图片,不过这类浏览器的使用越来越少,基本也可以忽略不计了。

      2022-06-24 14:16 回复
  10. 18楼

    这个很实用,加载更快了,空间省了

    2022-06-23 17:28 回复
  11. 17楼

    使用又拍云处理方便一点,还能做个异地图片备份。

    2022-06-23 10:57 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @cfanlost我向来喜欢手动折腾,图片之前也试过使用图床,但是有时候政策会变,再改也麻烦,还是简单点放自己服务器上,话说图片也不多。

      2022-06-23 11:29 回复
  12. 16楼

    又拍云存储能自动生成WebP 格式副本给客户端,不需要自己手动去制作WebP各式的图片。

    2022-06-23 10:38 回复
  13. 15楼
    大峰Firefox 101.0 Windows 10 x64 Edition

    一开始用这种格式的图片时,就发现图像大小适合放在博客里。

    2022-06-23 08:02 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @大峰是的,博客的服务器一般都不会买配置特别高,所以各项都要优化一下,图片小了访问速度肯定快一些。

      2022-06-23 10:06 回复
  14. 14楼

    话说如果有浏览器不支持的话~~~会咋样嘞?

    2022-06-22 23:22 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @姜辰Jcs.Moe浏览器不支持的话就不展示webp格式的图片,只展示原来格式的图片。对用户访问没有影响。

      2022-06-23 10:07 回复
  15. 13楼
    IamsayMicrosoft Edge 102.0.1245.44 Windows 10 x64 Edition

    虽然我完全看不懂,但是还是要个IT大佬点个赞! :smile:

    2022-06-22 22:35 回复
  16. 12楼
    maieGoogle Chrome 102.0.0.0 Windows 10 x64 Edition

    我是图床调用时自动转换

    2022-06-22 17:29 回复
  17. 11楼

    我也是直接在cdn转换了 :cool:

    2022-06-22 14:02 回复
  18. 10楼

    这格式目前对seo 的友好程度怎么样?
    另外,我新建了各站,wp默认上传剪裁出很多小尺寸的照片,,,,,,现如今有什么好的解决方案么?

    2022-06-21 23:23 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @牧羊人Webp格式的图片对SEO应该没有影响,百度,谷歌等搜索引擎都支持webp格式图片。
      wp后台-设置-媒体设置,你把缩略图大小、中等大小、大尺寸里面的大小都设置为0,你上传图片的话就只有原图了,不生成其他小图了。

      2022-06-22 14:56 回复
      • @William谢回复,我的应该是主题行为~

        2022-06-22 19:29 回复
        • WilliamGoogle Chrome 103.0.0.0 Windows 10 x64 Edition

          @牧羊人有的主题确实在主题的functions.php里面添加add_image_size来定义图片的大小,删掉就行,再按我上面说的设置-媒体设置操作一下。
          如果上传的图片宽度超过768px的话还是会生成一个宽度为768的小图,上传不超过768就不会生成。这个的解决方法就是进入后台,在 /wp-admin/ 的后面加上 options.php。就是 http://你的域名/wp-admin/options.php 进入隐藏的全局设置页面,然后在浏览器中通过 Ctrl+F 搜索 medium_large_size_w,找到后将数值 768 修改为 0 即可。这样上传的图片就只有默认的了。

          2022-06-22 22:47 回复
  19. 9楼
    拾风Safari 15.5 Mac OS X  10.15.7

    webp格式看来比jpge、jpg的优势很明显~

    2022-06-21 17:38 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @拾风优势确实明显,还支持动态webp图片,不过想进一步普及还需要时间。

      2022-06-22 14:52 回复
  20. 8楼

    这个格式我都是让 CDN 自动完成的!

    2022-06-21 17:34 回复
  21. 7楼
    阿锋华为浏览器 12.1.1.301 HarmonyOS

    webp现在应用很广泛,1M带宽确实不适合加载图片。

    2022-06-21 17:28 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @阿锋1M带宽限制流量才128K,多加载几张图片就慢了,只能想着尽可能控制图片大小了。

      2022-06-22 14:51 回复
  22. 6楼

    我都是直接在电脑上压缩完毕之后,才上传到兰空图床,原图压力太大了。也没有怎么去找插件工具,本身博客图片也不多,手机拍出来就裁切一下。不过最近用微信传的时候自动都压缩了,效果吗,也就一般。

    2022-06-21 16:12 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @网友小宋上传到图床的话就没有这些担忧了,图片自己压缩到一个自己满意的情况就好了。

      2022-06-22 14:48 回复
  23. 5楼

    这种格式确实以后是主流了,不过我的程序不支持需要自己修改,我的图片一般是经过在线压缩再通过后台上传,个人博客一般一篇文章不会放太多图片…流水账为主哈哈

    2022-06-21 11:34 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @Mr.Chou我博客图片也不算很多,一般也都是本地压缩之后在手动ftp上传。对于旅游类等图片多的博客来说,图片质量小一些对访问体验还是很有帮助的。

      2022-06-21 14:39 回复
  24. 4楼
    vian:Google Chrome 101.0.0.0 Windows 10 x64 Edition

    有在线的格式转换网站 也可以用格式工厂等软件操作 我也在用webp格式 比较小图损低

    2022-06-21 11:04 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @vian恩,想转换还是挺多方式的,就是一般情况下,有些看图软件还没有很好的支持webp格式的。

      2022-06-21 14:36 回复
  25. 地板
    小元Firefox 101.0 Windows 10 x64 Edition

    又了解到一点新东西,之前保存很多淘宝图都是webp格式,还纳闷了为啥都使用这种呢。。。另存为现在确实显示webp了~

    2022-06-21 08:14 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @小元随着IE浏览器的正式淘汰,Chrome内核的浏览器覆盖原来越广,webp格式的图片也会应用的越来越多。

      2022-06-21 10:34 回复
  26. 板凳
    S̆̈Safari 15.5 iPhone iOS 15.5

    最好的还是ailyun之类直接上传jpg在线生成webp,并写几句php,根据浏览器兼容情况自动切换格式。

    2022-06-20 23:32 回复
    • WilliamFirefox 101.0 Windows 10 x64 Edition

      @S̆̈图片本身都是上传到服务器上的,插件也是能自动生成webp格式的图片的,也不会影响原来的图片格式,只是新增了一个webp格式图片,然后根据浏览器自动展示对应的图片格式。
      我只是用了这个插件针对浏览器展示对应的图片格式的功能,没有使用wp自带的上传图片功能而已。

      2022-06-21 10:16 回复
      • S̆̈Safari 15.5 Mac OS X  10.15.7

        @William可是你的图还是jpg啊,不是webp。
        https://www.weisay.com/blog/weiimg/article/571_1.png
        我的方法是直接上传到aliyun oss,然后调用云的服务,返回webp,这样不占用自己的服务器,也不需要额外生成另外的webp。

        2022-06-21 22:53 回复
        • WilliamFirefox 101.0 Windows 10 x64 Edition

          @S̆̈你发的那个图片地址会经过插件和nginx配置,实际请求和展示的是webp格式的图片,如果你用谷歌浏览器的开发者工具查看,网络里面图片名称虽然是571_1.png,但是它的类型是webp,你另存图片的话也是webp格式。
          我用的这个方式确实会有一张jpg图片和一张对应的webp图片,稍微占一些空间,不过我网站图片不多,对我来说这个空间问题可以忽略。
          目前我这样好处是可以这个插件兼容IE浏览器或者低版本兼容性不好的浏览器下能正常访问,不过目前IE浏览器已经退役,单纯的使用webp格式的问题已经不大。

          2022-06-22 14:38 回复
  27. 沙发
    LvtuSafari 15.5 Mac OS X  10.15.7

    现在PS和AI都不敢升级到2022了,zii破解网站不知什么原因停更了。。。 :cry:

    2022-06-20 19:41 回复
    • WilliamGoogle Chrome 102.0.0.0 Windows 10 x64 Edition

      @Lvtu现在网上下载的最新版的大多都是直接破解好了的,断网直接安装。我最近刚刚换了v23.4.1.547这个版本。

      2022-06-20 19:51 回复
    • @Lvtu微博 @vposy

      2022-06-21 23:24 回复
      • LvtuSafari 15.5 iPhone iOS 15.5

        @牧羊人刚去看了那位大神的微博:Mac版不作支援,继续看戏! :cry:

        2022-06-25 06:32 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter