关于webp图片格式之前老白博客写过相关介绍,简单一句话总结就是更省空间、更省带宽,网页加载速度更快!之前介绍过一款WordPress插件:Images to WebP,比较适用于图片较少的网站,今天给大家介绍的是“数据库法实现WordPress全站图片快速转webp格式”,适用于图片量比较大的。详细的教程如下:
现有的很多插件都支持将WordPress全站图片转webp,但是有两个小问题:
①.当全站图片量比较大(>1000),服务器性能又跟不上,转webp费时费力,还一直占用服务器;
②.目前老白没有遇到任何一个插件支持将已有图片webp化同时修改数据库的,简单说就是文章里面的图片地址仍旧是非webp的,比如Images to WebP这个就是通过伪静态跳转规则实现的。
因此,如果你的图片量大,老白个人推荐下面的方法:
[h1]1.服务器打包全站图片[/h1]
以宝塔面板为例,WordPress网站上传的图片路径一般为:/www/wwwroot/test.xcbtmw.com/wp-content/uploads
因此,我们只需要打包,下载该文件夹到电脑本地即可
[h1]2.本地转webp处理[/h1]
图片转webp的Windows工具非常多,老白博客推荐caesium,优点是不会破坏原有图片的位置,支持将整个文件夹拖进去处理。
[h2]2.1设置图片webp效果[/h2]
这里可以选择设置每种图片转为webp后的质量,数值越低,压缩效果越好,但是图片质量就越差,老白设置的如下
[success title="提示"]如勾选无损压缩,则图片质量为最好[/success]
[h2]2.2 原目录结构输出[/h2]
其他相关设置自行探索,注意此处勾选原目录结构
[h2]2.3 上传替换图片[/h2]
把原来的图片删除或自己打压缩包备份,上传转webp后的图片到服务器
[h1]3.数据库替换图片地址[/h1]
数据库语句是最强大,最简单的WordPress批量修改方式了,任何WordPress插件都替代不了。老白之前写过不少数据库妙用,如下:
[h2]3.1 方法原理介绍[/h2]
今天这个也是非常相似,操作原理十分简单,就是搜索替换而已,原来的图片地址为:
https://test.xcbtmw.com/wp-content/uploads/replace/a9348cbbf79c3e39e675858324510a4c.png
如果我们将图片转为webp后,那正确的图片地址就变为:
https://test.xcbtmw.com/wp-content/uploads/replace/a9348cbbf79c3e39e675858324510a4c.webp
[h2]3.2 数据库语句[/h2]
一般需要修改图片地址的就是两个位置:WordPress文章内容和文章特色图片,这两个对应的字段名是post_content
字段和postmeta
一般特色图片是自动获取的,所以postmeta
表一般不用进行修改,我们只需要修改post_content
字段
UPDATE wp_posts SET post_content = REPLACE(post_content, '.jpg', '.webp'
依次替换即可,注意某些表名以及标点符号,中英文的,再次提示:记得备份数据库!!!
如meta还需要修改,则参照下面这个
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '.jpg', '.webp')
[h2]3.3 结束语[/h2]
这个是适用于对WordPress网站已有图片的,对于新上传的图片,大家在选择webp的WordPress插件的时候,建议考虑以下两点:
- 插件支持设置转webp的速度/数量,确保插件运行不会影响服务器运行
- 插件卸载后,不影响网站使用(就是文章里面的图片地址已经是webp的地址了)
推荐一个plus webp插件:https://www.bufanz.com/post/178.html
本文作者为test,转载请注明。
哈哈哈,感谢,之后还是经常要用到,感谢肝文章
@Jay哈哈,谢谢支持
以前刚搭建WP网站的时候才了解到webp图片格式,所幸上传的图片只有几十张,用plus webp插件把原图转换到webp,主题自定义缩略图的配置,用SQL语句把原图的格式后缀名替换成webp就完成了。
@不凡这个插件可以,我放推荐里面了
用这么费劲吗?阿里云CDN不是有图片处理吗,加个WEBP支持的判断,来选择图片格式不就可以了。或者用CDN的性能优化的图片自动处理,CDN会自动判断显示WEBP。
@琵琶haha<img class='comments-emoji' src='https://www.xcbtmw.com/wp-content/themes/theme-document-master/assets/smilies/haha.png' title='emoji'/>,我们是没有CDN的,老哥
老白博客这个主题不错,很简洁清爽
@BigQiang哈哈,谢谢,这个是document主题,作者开源免费的,很适合用来做笔记:https://nicen.cn/1552.html
@老白感谢推荐,收藏了