Warning: Undefined array key "night" in /www/wwwroot/dhaomu.com/wp-content/themes/b2/header.php on line 18

WordPress教程全站图片快速转webp格式

关于webp图片格式之前写过相关介绍,简单一句话总结就是更省空间、更省带宽,网页加载速度更快!之前介绍过一款wordpress插件:Images to WebP,比较适用于图片较少的网站,今天给大家介绍的是全站图片转,适用于图片量比较大的。

关于webp图片格式之前写过相关介绍,简单一句话总结就是更省空间、更省带宽,网页加载速度更快!之前介绍过一款wordpress插件:Images to WebP,比较适用于图片较少的网站,今天给大家介绍的是全站图片转,适用于图片量比较大的。

WordPress教程全站图片快速转webp格式插图
论WordPress全站图片快速转webp格式

现有的很多插件都支持将WordPress全站图片转webp,但是有两个小问题

  • 当全站图片量比较大(>1000),服务器性能又跟不上,转webp费时费力,还一直占用服务器;
  • 目前没有遇到任何一个插件支持将已有图片webp化同时修改数据库的,简单说就是文章里面的图片地址仍旧是非webp的,比如Images to WebP这个就是通过伪静态跳转规则实现的。

因此,如果你的图片量大,个人推荐下面的方法:

服务器打包全站图片

以宝塔面板为例,WordPress网站上传的图片路径一般为:/www/wwwroot/test.dhaomu.com/wp-content/uploads

WordPress教程全站图片快速转webp格式插图1
论WordPress全站图片快速转webp格式

因此,我们只需要打包,下载该文件夹到电脑本地即可

本地转webp处理

图片转webp的Windows工具非常多,博客推荐caesium,优点是不会破坏原有图片的位置,支持将整个文件夹拖进去处理。

设置图片webp效果

这里可以选择设置每种图片转为webp后的质量,数值越低,压缩效果越好,但是图片质量就越差,老白设置的如下

提示 如勾选无损压缩,则图片质量为最好

WordPress教程全站图片快速转webp格式插图2
论WordPress全站图片快速转webp格式

原目录结构输出

其他相关设置自行探索,注意此处勾选原目录结构

WordPress教程全站图片快速转webp格式插图3
论WordPress全站图片快速转webp格式

 

上传替换图片

把原来的图片删除或自己打压缩包备份,上传转webp后的图片到服务器

注意 操作有风险,请注意备份网站和数据库

数据库替换图片地址

数据库语句是最强大,最简单的WordPress批量修改方式了,任何WordPress插件都替代不了。

方法原理介绍

今天这个也是非常相似,操作原理十分简单,就是搜索替换而已,原来的图片地址为:

https://test.dhaomu.com/wp-content/uploads/replace/a9348cbbf79c3e39e675858324510a4c.png

如果我们将图片转为webp后,那正确的图片地址就变为:

https://test.dhaomu.com/wp-content/uploads/replace/a9348cbbf79c3e39e675858324510a4c.webp

数据库语句

一般需要修改图片地址的就是两个位置:WordPress文章内容和文章特色图片,这两个对应的字段名是post_content字段和postmeta

WordPress教程全站图片快速转webp格式插图4
论WordPress全站图片快速转webp格式

一般特色图片是自动获取的,所以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')

结束语

这个是适用于对WordPress网站已有图片的,对于新上传的图片,大家在选择webp的WordPress插件的时候,建议考虑以下两点:

  • 插件支持设置转webp的速度/数量,确保插件运行不会影响服务器运行
  • 插件卸载后,不影响网站使用(就是文章里面的图片地址已经是webp的地址了)
温馨提示:
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:duhaomu@163.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明

给TA赞赏
共{{data.count}}人
人已赞赏
编程技巧

DedeCMS织梦模板使用方法

2024-4-27 9:00:00

编程技巧

PbootCMS网站开启后台菜单管理功能

2024-5-15 0:00:00

0 条回复 A文章作者 M管理员

Warning: Trying to access array offset on value of type null in /www/wwwroot/dhaomu.com/wp-content/themes/b2/functions.php on line 3914

Warning: Trying to access array offset on value of type null in /www/wwwroot/dhaomu.com/wp-content/themes/b2/functions.php on line 3914
----《》
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索