webp是一种更加适合网页展示的图片格式。七牛云是直接输出webp格式的,只需要简单添加几个代码即可。可以说,使用webp也是一种SEO手段。

什么是webp格式?

WebP 是谷歌推出的适合于 Web 使用的图像格式。

首次提出的时候是在2010年,谷歌表示,webp这种格式的主要优势在于高效率。他们发现,“在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。

一开始,对于这个新的格式,很多浏览器并不支持。但是现在都已经2022年了,基本所有的浏览器都是支持的。我测试了搜狗浏览器、360极速浏览器、Edge浏览器、火狐浏览器、谷歌浏览器等,都是没有问题的。

几种图片格式的对比

可以得出结论:

  • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩
  • 转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)
  • 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

七牛云设置webp格式输出

博主目前上传到七牛云的图片都是png的。但是七牛云支持对图片进行格式转换的。

这里如何设置转换代码是一个坑。你不要去看帮助文档,不要去看帮助文档,不要去看帮助文档!我建议直接去存储空间里设置图片样式即可。帮助文档会把你绕晕,并且设置不对,导致图片显示不正确。

图片样式的设置

这里我设置的有两个项目。分别是图像的格式,以及图片质量。图片质量我设置的是50%。这样会有点糊,但是并不影响我的博客。

格式转换与质量

通过点一点的方式,就能获得到生成的代码!

代码

最后应用到图片上就可以了。格式举例:myexample.png?imageView2/0/format/webp/q/50。注意要这个?不要弄丢了。

由于前期没有做,我是直接在数据库进行操作的,也就是批量替换字符。当然,我建议操作之前进行备份。关于批量修改数据库的操作,百度一下有一大堆。这里我只是提醒:一定要提前备份数据库,一定要提前备份数据库。

为了以后的方便,直接在PicGo里面加入图像处理的后缀操作:

批量处理

最终效果

被压缩的图片

不知道是不是心理作用,感觉网站确实要快不少。


版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/webpq50.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!
▶ 站长邮箱 [email protected][email protected] ,如不方便留言可邮件联系。

最后修改:2022 年 11 月 17 日
如果觉得我的文章对你有用,请随意赞赏