跳到主要内容

移动端优化 | 将网站图片格式改为webp格式的Nginx配置

当我们提高网站移动端排名时,需要根据谷歌console或者bing master等工具进行网站诊断,会得到专业的分析结果,米国生活在提高网站移动端优化配置时,得到的建议是将.jgp、.png等图片格式进行webp的转化,以加速网络加载图片的速度,提高移动端体验。

图片转化插件工具:

WordPress将图片转化为webp格式的插件工具有很多,诸如,imagify,Converter for Media,EWWW Image Optimizer等,都很好。米国生活对成长性的生产力有独特的偏好,所以,选择了 Converter for Media

Converter for Media-Webp-screenshot-1

Nginx配置

对于不支持.htaccess规则的Nginx服务器,需要额外的Nginx服务器配置才能使插件正常运行。

请按照以下 4 个步骤操作(请全部执行)

步骤 1

在其中一个路径中找到配置文件(请记住选择虚拟主机使用的配置文件):– 或

/etc/nginx/sites-available//etc/nginx/sites-enabled//etc/nginx/conf.d/

如果是宝塔面板还可以尝试找这些目录:/www/server/nginx/

并添加此代码(在服务器 server{ ... } 块的开头添加这些行)– 请记住在任何其他位置location {} 规则之前添加这些规则

# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
    set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_avif
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

步骤 2

然后添加对所需 MIME 类型的支持(如果不支持)。编辑配置文件:
/etc/nginx/mime.types

并添加此代码(将这些行添加到类型 type{ ... } 块中):

image/webp webp;
image/avif avif;

nginx-type-Screenshot_1

步骤 3

进行更改后,请记住重新启动计算机:

systemctl restart nginx

如有问题,请在支持论坛中与我们联系。我们将尽力提供帮助。

步骤 4

另请参阅下面常见问题解答中的问题“Nginx 代理的配置”。

尚未配置成功,还需要继续测试…

高端网站建设
1. 网站全屏的Banner如何设计
2. 移动端优化 | 将网站图片格式改为webp格式的Nginx配置
返回顶部