前端nginx已经安装的模块, –with-http_image_filter_module ,需要当浏览器支持webp格式时,Nginx会自动将jpg图片转换为webp格式返回给客户端。

为了让Nginx在浏览器支持webp格式时自动将jpg图片转换成webp格式并返回给客户端,你需要在Nginx配置中设置相应的转换规则。下面是一个基本的配置流程和示例。

  1. 确认Nginx已安装了http_image_filter_module模块。
  2. 确认GD库支持webp。

然后,你可以按照以下步骤配置你的Nginx服务器:

  1. 打开Nginx配置文件。这通常位于/etc/nginx/nginx.conf或者你网对应的server配置块内(例如 /etc/nginx/sites-available/yourwebsite)。
  2. 加入 map 指令到 http 块来检查HTTP头部Accept字段是否包含image/webp,这样Nginx就可以知道客户端是否支持webp格式。
http {
    map $http_accept $webp_suffix {
        default   "";
        "~*webp"  ".webp";
    }
    ...
}
  1. 在你的server配置中,设置location块,它会处理图片请求,使用try_files指令验证是否存在webp格式的文件,若不存在则通过image_filter指令进行转换。
server {
    ...
    location ~* ^/images/.+\.(jpg|jpeg)$ {
        if ($webp_suffix != ""){
            add_header Vary Accept;
            try_files $uri$webp_suffix $uri =404;
            expires 30d;
            access_log off;
            image_filter webp;
            break;
        }
    }
    ...
}

该配置检查了请求的文件路径是否以 .jpg.jpeg 结尾,并且根据Accept请求头中是否存在webp进行处理。如果客户端支持webp格式,Nginx会尝试提供同名的.webp文件。如果不存在这样的文件,它将调用image_filter模块将原始图片实时转换成webp格式。Vary: Accept响应头指明了响应是根据请求头的Accept字段变化的。

重要提示:

  • 进行配置更改后,您需要重载或重启Nginx (sudo nginx -s reload 或者 sudo service nginx restart)。
  • 实时转换图片会增加服务器响应时间,所以最好是预先生成webp图片或使用缓存机制。
  • 不所有的GD库版本都支持webp格式,请确保GD库更新到支持webp的版本。

以上只是一个基本的转换配置示例,可能需要针对你的具体场景做适当调整。


已发布

分类

作者:

标签

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注