如何使用 htaccess 提供 webp 图像？答案

【问题标题】：How to serve webp images using htaccess?如何使用 htaccess 提供 webp 图像？
【发布时间】：2021-08-29 02:59:57
【问题描述】：

如果图像（jpg 或 png）可用作 webp，我想提供 .webp 图像。如果不是，我想显示 jpg 或 png。

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*)\.(jpe?g|png)(.*)$ $1.$2.webp [NC,L]

AddType image/webp .webp

我需要的最终 URL 是这样的：

"myurl.com/foo.jpg.webp"

如果 webp 文件存在，如果不存在我需要：

"myurl.com/foo.jpg"

作为后备解决方案。

【问题讨论】：

标签： regex .htaccess mod-rewrite url-rewriting

【解决方案1】：

如果请求的 URL 以jpeg 或png 结尾，您可以使用

测试对应的webp

RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^ %{REQUEST_FILENAME}.webp [L]

如果你愿意，你可能会更严格

RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule \.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [L]

如果条件和规则不匹配，请求将失败并按原样提供文件 (.jpg/.png)。

【讨论】：

【解决方案2】：

有些浏览器不完全支持webp，你应该添加一个条件只发送到支持的浏览器：

<Files *.webp>
    Header set Vary "Accept-Encoding"
    AddType "image/webp" .webp
    AddEncoding webp .webp
</Files>

RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]

【讨论】：

你能给我一个提示如何更改代码以适用于文件：file1.jpg -> file1.webp file2.png -> file2.webp 吗？不是将 .webp 添加到完整文件名，而是将原始文件扩展名替换为 webp 扩展名？
如果 myimage.jpg 和 myimage.jpg.webp 在同一个目录下，并且用户请求 myimage.jpg，路径仍然是 myimage.jpg，但会提供 webp 文件。它之所以有效，是因为浏览器不关心扩展，它关心类型 MIME 文件

【解决方案3】：

此 sn-p 检测浏览器是否为 supports WebP 图像，然后如果 .webp 文件与提供的 jpg/png/gif 位于相同的位置，则提供 .webp 图像而不是 jpg/png

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Check if browser supports WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP replacement image exists
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f

  # Serve WebP image instead
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
  # Vary: Accept for all the requests to jpeg, png and gif
  Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

【讨论】：

以上例子来源：github.com/vincentorback/WebP-images-with-htaccess