Nginx在Nginx中开启WebP格式图片自适应转换-Nginx-PHP中文网

Nginx可通过map+try_files实现WebP自动适配：先用map根据Accept头映射.webp后缀，再用try_files按$uri.webp→$uri顺序匹配，配合Vary Accept、正确MIME类型及缓存策略完成高效无损适配。

nginx在nginx中开启webp格式图片自适应转换

要在 Nginx 中实现 WebP 格式图片的**自动适配转换**（即：当浏览器支持 WebP 时返回 WebP 图片，否则回退为原图），Nginx 本身不直接生成 WebP，但可通过 条件判断 + 预先生成的 WebP 文件 实现高效、零实时压缩的“自适应”服务。核心思路是：检查请求头 Accept 是否包含 image/webp，再结合 WebP 文件是否存在，决定返回 .webp 还是原图（如 .jpg/.png）。

前提：准备好 WebP 文件

WebP 转换需离线完成（推荐使用 cwebp 工具批量生成），确保每张原图（如 photo.jpg）旁有同名 WebP 文件（photo.jpg.webp）或统一后缀（如 photo.webp）。常用命名方式：

/images/banner.png → 对应 /images/banner.png.webp
或统一用 .webp 后缀：/images/banner.png → /images/banner.webp（需重命名或软链）

配置 accept 头检测与文件存在判断

在 server 或 location 块中添加以下逻辑（以 .jpg/.png → .jpg.webp/.png.webp 方式为例）：

location ~ \.(jpg|jpeg|png|gif)$ {
    # 检查浏览器是否支持 WebP
    if ($http_accept ~* "image/webp") {
        # 尝试查找同名 .webp 文件（带原始扩展名）
        add_header Vary Accept;
        set $webp_suffix ".webp";
        set $webp_file "$request_filename$webp_suffix";
<pre class="brush:php;toolbar:false;">    # 若 .webp 文件存在，则重写为该路径并终止后续处理
    if (-f $webp_file) {
        rewrite ^(.*)$ $1$webp_suffix break;
    }
}

}

⚠️ 注意：if 在 location 中慎用，更健壮的方式是用 try_files + map（推荐）：

推荐方案：用 map + try_files 实现无 if 的优雅路由

在 http 块中定义映射：

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

在对应 location 中使用：

location ~ \.(jpg|jpeg|png|gif)$ {
    add_header Vary Accept;
    # 尝试匹配 .webp 文件；不存在则用原路径
    try_files $uri$webp_suffix $uri =404;
}

✅ 优势：不依赖 if，性能更好，逻辑清晰；Nginx 会按顺序检查 $uri.webp → $uri，自动选择可用资源。

补充：确保 MIME 类型正确 & 缓存策略合理

WebP 文件需被识别为 image/webp，在 http 块中确认已包含：

include       mime.types;
default_type  application/octet-stream;
<h1>mime.types 中应有：</h1><h1>image/webp                              webp;</h1>

同时建议为图片设置缓存头（在 location 内）：

expires 1y;
add_header Cache-Control "public, immutable";

这样浏览器和 CDN 都能长期缓存 WebP 版本，提升重复访问速度。