配置 Nginx 以提供 WEBP 图像？答案

【问题标题】：Configure Nginx to serve WEBP images?配置 Nginx 以提供 WEBP 图像？
【发布时间】：2021-05-08 10:26:51
【问题描述】：

我正在使用 ShortPixel 创建名为 image.webp 的 WEBP 图像，并保存在与 image.jpg 相同的文件夹中。

我在 etc/nginx/conf.d/webp.conf 中添加了这个：

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

并在nginx配置文件中添加include etc/nginx/conf.d/*.conf。

在 etc/nginx/conf.d/site.conf 中添加了这个

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "FULL PATH OF wp-content PARENT";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

检查nginx -t，一切正常。但是在 devtool/network 选项卡中，图像类型仍然是 jpg。这是为什么呢？

【问题讨论】：

标签： php wordpress nginx server webp

【解决方案1】：

不确定 Shortpixel 的逻辑究竟是如何工作的，但如果它正在拦截来自客户端的 GET 请求，您可能会在开发工具的网络日志中看到原始文件类型。

检查响应头，如果你看到content-type: image/webp，那么你就知道它正在工作。

另外，您是否手动将 webp 图像添加到文件夹中？如果是这样，请尝试删除它们并重新执行 Shortpixel 过程。我相当肯定 Shortpixel 会自动转换并添加图像本身。

实际上，在寻找一秒钟之后，您应该不必触摸外壳即可使用 Shortpixel。它表面上是为非技术用户设计的。

如果您仍然卡住，请检查以下内容：

API 密钥是否有效/正确实施？
MIME 与 Wordpress 冲突
内容安全政策

最后，Shortpixel 是一项付费服务。他们的客户支持绝对应该处理这个问题。如果不是，请丢弃它们。无论如何，有许多更轻量级的方法来提供 WebP 图像。

希望这可以帮助其他人解决问题。

【讨论】：