WordPress通过htaccess配置实现自适应加载WebP图片问题求助

需求说明 #

开发WordPress自定义主题时需要实现：当访问浏览器支持WebP格式，且站点目录存在与当前请求的jpeg/png图片同名的WebP文件时，直接返回WebP格式文件，降低资源加载体积。

最初尝试的规则代码 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
  RewriteCond %{DOCUMENT_ROOT}/$1\.webp -f
  RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

尝试将上述代码放在WordPress默认htaccess规则的上下方，均未达到预期效果，完整的当前htaccess配置如下：

原有完整htaccess配置 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
  RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# BEGIN WordPress
# BEGIN WordPress 与 END WordPress 之间的指令是动态生成的，仅可通过WordPress过滤器修改，任何手动修改此区间的内容都会被覆盖
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

# END WordPress

问题修复方案 #

核心错误点 #

1. 最终配置中缺失了检测WebP文件是否存在的判断规则RewriteCond %{DOCUMENT_ROOT}/$1\.webp -f，导致规则没有触发前提
2. Header规则的环境变量配置错误，原env=REDIRECT_accept应为env=REDIRECT_webp
3. 站点安装在/wordpress/子目录，WebP文件路径匹配需要补全子目录前缀

修正后的完整配置 #

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 检测浏览器支持WebP
  RewriteCond %{HTTP_ACCEPT} image/webp
  # 匹配jpeg/jpg/png格式请求
  RewriteCond %{REQUEST_URI} (.*)\.(jpe?g|png)$
  # 检测对应WebP文件存在
  RewriteCond %{DOCUMENT_ROOT}/wordpress/$1.webp -f
  # 重写返回WebP文件，设置正确MIME类型
  RewriteRule (.+)\.(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L]
</IfModule>
<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_webp
</IfModule>
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

# BEGIN WordPress
# BEGIN WordPress 与 END WordPress 之间的指令是动态生成的，仅可通过WordPress过滤器修改，任何手动修改此区间的内容都会被覆盖
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>

# END WordPress

额外注意事项 #

• 规则必须放在# BEGIN WordPress块上方，放在下方会被WordPress路由规则优先拦截，无法触发图片重写
• 确认服务器已启用mod_rewrite、mod_headers、mod_mime三个Apache模块
• 配置更新后清空浏览器缓存和站点缓存，避免旧的图片缓存影响效果验证
• 确认WebP文件与原jpeg/png文件存储在同一目录，文件名仅后缀不同

内容的提问来源于stack exchange，提问作者angeloD83