这一篇仅讨论在同时存在原始图片版本和webp版本的情况下，如何使Nginx尝试去返回webp版本给前端（比如浏览器支持webp的话），并且在不存在webp版本图片或不支持webp时回退成原始版本传递。
这种方式，主要是可以在不动目前网页代码功能上，实现自适应webp支持。
首先就是你的原始图片和webp版本（原始图片含扩展名的情况下，添加webp扩展名）在一起的情况下，直接就是代码如下。
在nginx.conf的http块中：
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}在你的vhost中，增加：
location ~* ^/.+\.(png|jpg|jpeg)$ {
more_set_headers "Vary: Accept";
more_set_headers "Cache-Control: public, no-transform, max-age=2592000";
try_files $uri$webp_suffix $uri =404;
}这样在访问jpg、jpeg、png图时，nginx就会尝试访问webp版本，不存在时会自动降级返回。
相当于是浏览器支持时，访问的是原始图片完整名.webp，不支持时，直接就是原始图片完整名。
如果你像我一样，webp文件单独一个目录放（不污染原始目录），且只想对wordpress的uploads进行webp转换，那么可以试试以下方式。我是在wp-content新建webp目录，里面结构与uploads一致且存放为webp版本图片。
大家可以按照自己的实际来修改。
location ~* ^/wp-content/uploads/(.+\.(png|jpg|jpeg))$ {
more_set_headers "Vary: Accept";
more_set_headers "Cache-Control: public, no-transform, max-age=2592000";
if ($http_accept ~* "webp") {
rewrite ^/wp-content/uploads/(.*)$ /wp-content/webp/$1.webp last;
}
try_files $uri =404;
}
location ~* ^/wp-content/webp/(.+\.webp)$ {
more_set_headers "Vary: Accept";
more_set_headers "Cache-Control: public, no-transform, max-age=2592000";
try_files $uri @fallback_to_original;
}
location @fallback_to_original {
more_set_headers "Vary: Accept";
more_set_headers "Cache-Control: public, no-transform, max-age=2592000";
rewrite ^/wp-content/webp/(.*)\.webp$ /wp-content/uploads/$1 break;
try_files $uri =404;
}可能有朋友稍微懂一些的，会觉得是不是代码实现有点复杂了。但这是最好的结果，虽然单个location也能实现这个功能（包括AI也只会写一个location给你，我进行了测试），但实际上，当你的文件含非英文字符，比如中文字符，那么就会被转义，转义后，硬盘上是不存在这个文件的（除非你一开始存储就是以转义方式存储），那么Nginx就回退到原始文件，也就是含非英文字符的无法享受到webp返回。而现在这种略显复杂的实现方式，通过内部重定向逻辑来解决字符编码的问题。效率上，实际上对于Nginx几乎无影响。
另外建议大家在全局中启用open_file_cache，代码如下。这样nginx可以缓存到是否存在文件在内存中，而不用每次去硬盘查询。
还是在nginx.conf的http块中：
open_file_cache max=100000 inactive=30s;
open_file_cache_valid 30s;
open_file_cache_min_uses 2;
open_file_cache_errors on;转载请注明转自: kn007的个人博客 的《Nginx尝试返回webp版本的图片给浏览器》
