威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

启用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

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

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

  1. 35楼

    我用webp插件转换,配置好之后就是没效果,新添加图片和原来图片都不行

    2022-10-15 21:45 回复
    • WilliamGoogle Chrome 106.0.0.0 Windows 11

      @空空裤兜这种需要服务器做一些规则配置,不成功的话大多数都市配置的规则没有生效导致的。

      2022-10-18 09:49 回复
  2. 34楼

    WebP出来好几年了吧,主要顾虑还是iphone之前不支持,自从ios 14版之后,再也不用顾虑啦

    2022-09-21 13:34 回复
  3. 33楼
    吕楪Microsoft Edge 105.0.1343.42 Windows 10

    可以试试谷歌新出的Squoosh?网址是 https://squoosh.app/ ,不需要上传图片,直接在本地浏览器内直接转webp在内的各种格式,还可以安装为PWA应用。甚至能自己搭一个,比如我的是 https://squoosh.irithys.com/

    2022-09-16 20:06 回复
  4. 32楼

    刚刚下载了插件,使用了一下,效果还不错。
    我本来就把文章配图压缩的连他妈都不认识了。
    然后再用webp压缩一下,这下自己,连图片自己都不认识自己了。
    只是将9月份的压缩了。
    浅试一下。

    2022-09-06 17:04 回复
  5. 31楼
    maieGoogle Chrome 103.0.0.0 Windows 10

    又拍云图床,直接引用云端webp即可

    2022-08-05 23:05 回复
    • WilliamFirefox 103.0 Windows 10

      @maie看着用又拍云的挺多,它的图片转换功能试用还挺不错的。

      2022-08-06 21:10 回复
  6. 30楼

    我去年safari支持webp之后也立刻开始用webp,的确优秀。

    2022-07-24 22:01 回复
  7. 29楼
    sysFirefox 104.0 Windows 10

    有时下载视频发现是 webm 格式,不知是不是跟 webp 一样,就类似 wma 和 wmv 一样同源同宗 :?:

    2022-07-11 08:47 回复
    • WilliamMicrosoft Edge 103.0.1264.49 Windows 10

      @sys没怎么了解过webm,看着命名和webp类似,应该也是谷歌搞出来。

      2022-07-11 10:39 回复
  8. 28楼

    我是用的阿里云对象存储在线处理的,原图像还是jpg,方便存档,在线自动转成webp后展现。

    2022-07-09 00:06 回复
  9. 27楼

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    写博客,还得精打细算。

    2022-06-24 08:36 回复

发表评论

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

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

快捷键:Ctrl+Enter