Nginx下wordpress采用WebP格式图片

前言

WebP是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式。

WebP最初在2010年9月发布,其支持库于2018年4月发布1.0版本。截至2021年5月,已有94%的浏览器支持此格式。

WebP非常适合因为图片太大而头疼的站长

先上图,下图分别是经过无损转换WebP和原图的大小及所占空间,由下图可知WebP所占只有1/12左右

Nginx下wordpress采用WebP格式图片插图

准备工作

首先我们前往Wordpress商店,搜索“Images to WebP”这个插件,并安装它

Nginx下wordpress采用WebP格式图片插图1

或者你也可以从https://cn.wordpress.org/plugins/images-to-webp/获取插件

开始

然后启用插件。此时会弹出以下提示

You need to add this map directive to your http config, usually nginx.conf ( inside of the http{} section ):

map $http_accept $webp_suffix{
    default "";
    "~*webp" ".webp";
}
then you need to add this to your server block, usually site.conf or /nginx/sites-enabled/default ( inside of the server{} section ):

location ~* ^/wp-content/.+\.(png|gif|jpe?g)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

这时候我们进入Nginx的配置文件,并在下图所示位置添加以下代码(本文以宝塔面板安装的1.21.4版本Nginx为例,其他方式或版本安装的Nginx请自行寻找nginx.conf)

Nginx下wordpress采用WebP格式图片插图2
map $http_accept $webp_suffix{
	default "";
	"~*webp" ".webp";
}

点击保存,然后退出该页面;点击网站,在你的wordpress站点伪静态添加以下代码(如下图所示)

Nginx下wordpress采用WebP格式图片插图3
location ~* ^/wp-content/.+\.(png|gif|jpe?g)$ {
	add_header Vary Accept;
	try_files $uri$webp_suffix $uri =404;
}

保存退出后,重载并重启Nginx和PHP

Nginx下wordpress采用WebP格式图片插图4
Nginx下wordpress采用WebP格式图片插图5

此时,你今后上传的图片会自动生成WebP版本并使用它

然后返回wordpress后台-已安装的插件-启用Images to WebP

不出意外,你将会进入下图的界面

Nginx下wordpress采用WebP格式图片插图6

图上的东西保持默认即可,当然也可以按照实际情况调整

最后勾选你图片所在的目录(一般是uploads,即上传图片所在目录),两个按钮按照实际情况自己点即可(不懂就点第一个)

Nginx下wordpress采用WebP格式图片插图7

等待一段时间转换完成,回到首页F12开发者工具,你会发现已经转换过的图片是WebP了

Nginx下wordpress采用WebP格式图片插图8
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片