php - 配置 Nginx 以提供 WEBP 图像？

Question

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

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

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

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

1. 在 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。这是为什么？

Answer 1

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

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

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

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

如果您仍然卡住，请检查这些:

• API key 已激活/正确实现？
• MIME 与 Wordpress 冲突
• 内容安全政策

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

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