您的位置:首页 > wordpress

网站添加图片 WebP 自动转换功能
wordpress 2024-9-21编辑:深圳网站建设阅读( WordPress 转换 添加

最近这几天在网上闲逛时,发现了【le】一个名叫 WebP_Server_Go 的新【xīn】项目,可以无缝将网站上【shàng】已有图片转换为 WebP 格【gé】式输出【chū】,同时不改变【biàn】原始图片【piàn】链【liàn】接,看起【qǐ】来挺【tǐng】适合本【běn】站需求,使用也比较【jiào】简单【dān】。

网站【zhàn】使用 WebP 格式【shì】图片的好处是非常明【míng】显的,比起【qǐ】 jpg 有更【gèng】强的压缩率

项目【mù】地【dì】址:https://github.com/webp-sh/webp_server_go

首先去 Releases 页面下【xià】载项目文件,这【zhè】个项目成品就是一个单【dān】文件【jiàn】,没有后缀格式,为了方便,我这里重命【mìng】名【míng】为 webp-server。

本站服务器环境为【wéi】 CentOS 7.7 64bit,这【zhè】项目从名【míng】称【chēng】来看是不支持 32 位系【xì】统【tǒng】的。

我【wǒ】这里由于机子是系【xì】统盘和数据盘分开【kāi】的,因此把程序丢到/opt/webp/目录【lù】,转换【huàn】后【hòu】的输【shū】出文件放在【zài】/www/webp/下。

接着 SSH 下切换到此目录:

cd /opt/webp

让程序自己创建一个样本配置文件:

./webp-server -dump-config > config.json

webp-server 是程序【xù】的文件名,这个根据自己实际修【xiū】改,GO 语【yǔ】言的程序【xù】在 Linux 下可以直接运行,非【fēi】常【cháng】方便。

然后编辑 config.json 文件,:

 { 
          "HOST": "127.0.0.1", 
          "PORT": "3333", 
          "QUALITY": "80", 
          "IMG_PATH": "/www/wwwroot/pzo.cc", 
          "EXHAUST_PATH": "/www/webp", 
          "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"] 
}

配置文件内容根据自己网站情况对应修改。

host 是监听地址,默认本机一般不用改

port 是端口,这个【gè】可以自【zì】己设定,注意由于【yú】是本【běn】地调用【yòng】,防火墙【qiáng】是不需要放行此端口的 。

quality 是转换质【zhì】量,数【shù】字【zì】越大【dà】画质越好,一般来【lái】说默认【rèn】的 80 差不多【duō】就刚好了,具体看【kàn】自己需求。

img_path 是网站图片存储【chǔ】路径,这个只需要【yào】设定到网【wǎng】站所在的目录【lù】即可,具体目录会【huì】通【tōng】过 nginx 规则【zé】匹配。

exhaust_path 是转换后的缓存输【shū】出目录【lù】,转换后的图片缓【huǎn】存会【huì】放【fàng】在这里【lǐ】,这个根据自己情况设定,我这里设定在【zài】/www/webp 。

allowed_types 这个【gè】就【jiù】不用多说【shuō】了【le】,指定要转换的源图片【piàn】格【gé】式,一般网站也就这几种格【gé】式居多,正【zhèng】常来说不用改。


改【gǎi】完配【pèi】置文件就保存关闭,然后【hòu】去修改网站的 nginx 配置文件,添【tiān】加【jiā】以下内容:

location ^~ /wp-content/uploads/ {         
  proxy_pass http://127.0.0.1:3333; 
}

我【wǒ】这里是 wordpress 网站,所以监控/wp-content/uploads/目录,效果【guǒ】如下图:

改完保存,重载 nginx 配置即可。

然后可以先运行测试一下,给程序执行权限:

chmod +x webp-server

直接执行,根据自己 config 文件目录修改 :

./webp-server --config /opt/webp/config.json

然后网站上找几个【gè】有【yǒu】图片的【de】页面打开【kāi】,ssh 里如果看到如下【xià】图【tú】这种 save to 的【de】记录,就是成功转换图片了:

网页端 F12 调【diào】出【chū】开发者【zhě】工具,也可以看到文件后缀名【míng】虽然还是 jpg,但【dàn】类型已经变成了 webp:

测试【shì】运行【háng】正常【cháng】的话就可以 Ctrl+C 先退出了,来准备将其添加到【dào】开机自启【qǐ】,用【yòng】 systemd 来管理。

在程序目录运行以下命令,让它创建一个样本服务文件:

./webp-server -dump-systemd > /lib/systemd/system/webp.service

然后【hòu】去/lib/systemd/system/目【mù】录下【xià】,编辑 webp.service 文件,文件样例【lì】内容【róng】如下:

[Unit] 
Description=WebP Server 
Documentation=https://github.com/n0vad3v/webp_server_go 
After=nginx.target 

[Service] Type=simple 
StandardError=journal 
AmbientCapabilities=CAP_NET_BIND_SERVICE 
WorkingDirectory=/opt/webp
ExecStart=/opt/webp/webp-server --config /opt/webp/config.json 
ExecReload=/bin/kill -HUP $MAINPID 
Restart=always 
RestartSec=3s 


[Install] 
WantedBy=multi-user.target

WorkingDirectory 和 ExecStart 都设【shè】定【dìng】成程序目录【lù】,比如我【wǒ】的配置文【wén】件里就都改成了/opt/webp/ 。

保存退出,然后重新加载服务配置:

systemctl daemon-reload

启动程序:

systemctl start webp.service

再查看一下程序状态:

systemctl status webp.service

显示绿色 running 的话就是正在运行了:


再次【cì】打开浏览器这类测试【shì】转换效果,一切正【zhèng】常的话【huà】就可以添加到开机自【zì】启了:

systemctl enable webp.service

到【dào】此【cǐ】就整【zhěng】个程序【xù】配置完毕,可以在支持【chí】 webp 的【de】浏【liú】览器里看到页面加载速度的明显提升。

服务范围:WordPress搭建、WordPress主题开发、WordPress二次【cì】开发、WordPress插【chā】件【jiàn】开【kāi】发
其它服务:网站建设、企业邮箱【xiāng】、数【shù】字证书ssl、400电话、
技术标签:企业网站、外贸网站、外贸商城、其它问题
联系方式:电话:13714666846 微信同号

企业网站定制

企业网站定制 根据企业需求,量身定制设计

企业网站定制:2800元起
添加微信 请说明来意
联系我们
站内搜索 MORE+

24小时服务热线 0755-29765948
  • 地址:深圳市罗湖区人民北路2033号206
  • 电话:0755-29765948 传【chuán】真:82256610
  • 手机:13714666846 18948334877
  • 邮箱:gong@city96.com 164761418@qq.com
  • 粤ICP备14049207号
创意化数字品牌整合网络营销
营销网站让你坐等商机坐佣客户,Rss

版权所有:深圳市网商在线科技有限公司

版权所有:深圳市网商在线科技有限公司
友情连接link: