phpEnv 的 Nginx 默认不支持 WebP 自适应分发，需手动添加 MIME 类型声明（image/webp webp）、用 map + try_files 实现 Accept 头识别与回退机制，并配置 Vary Accept 头及差异化缓存。

phpEnv 默认的 Nginx 不支持 WebP 自适应分发，核心问题不是“能不能返回 .webp 文件”，而是**缺少 MIME 类型声明、Accept 头识别逻辑、以及文件存在性回退机制**。只要补上这三块，无需重编译、不依赖 image_filter，就能让浏览器自动选 WebP。

确认并添加 WebP MIME 类型

Nginx 必须知道 .webp 对应 image/webp，否则即使文件存在，浏览器也可能拒绝渲染或触发下载。

• 打开 phpEnv 的 Nginx 配置文件（通常在 phpEnv\nginx\conf\nginx.conf）
• 找到 http { ... } 块内的 types { ... } 区域
• 在里面追加一行：image/webp webp;
• 若整个 types 块不存在，就手动加上（放在 include mime.types; 之后更稳妥）

用 map + try_files 实现无 if 的 WebP 自动协商

这是最轻量、最稳定的方式：不改源码、不装插件、不碰 Lua，靠 Nginx 原生命令完成“有 WebP 就给，没有就回退”。

• 在 http 块（server 块外）添加：

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

• 在站点对应的 server 块里，找到图片 location（如 location ~* \.(jpg|jpeg|png|gif)$）
• 把里面的 try_files 行替换成：try_files $uri$webp_suffix $uri =404;
• 务必加这一行：add_header Vary Accept;（否则 CDN 或代理可能缓存错版本）

预生成 WebP 文件的命名与存放规则

phpEnv 没有自动转图能力，WebP 必须提前生成好——命名方式直接影响 try_files 是否能命中。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

立即学习“PHP免费学习笔记（深入）”；

• 推荐方式：/images/photo.jpg → 同目录放 /images/photo.jpg.webp（保留原后缀+追加 .webp）
• 不推荐方式：全改成 .webp 后缀（如 photo.webp），因为会破坏原有 HTML 中的 src 路径，需批量改前端
• 生成命令示例（Windows 下可用 Git Bash 或 WSL）：cwebp -q 85 photo.jpg -o photo.jpg.webp
• 确保 WebP 文件权限可读（phpEnv 通常以 Windows 用户身份运行，不用改 chmod）

缓存策略必须区分 WebP 和原图

如果所有图片都用统一 expires 1y，WebP 的优势会被削弱——它体积小、适合更长缓存，但 Nginx 默认无法按响应内容类型差异化设置。

• 在 http 块中定义：

  map $sent_http_content_type $webp_cache_time {
      ~*image/webp "1y";
      default "7d";
  }

• 在图片 location 中用：expires $webp_cache_time;（注意：不要和 add_header Cache-Control 混用，expires 会覆盖后者）
• 若需加 immutable，改用：add_header Cache-Control "public, immutable" always;，且必须带 always

最容易被忽略的是 Vary Accept 的缺失和 MIME 类型未注册——这两项出问题，浏览器要么收不到 WebP，要么收到后不渲染。其他配置哪怕少一两项，至少还能回退到原图；但这俩一旦漏掉，WebP 就完全失效。