7

如果浏览器支持，是否可以使用 mod_negotiation 来提供 webp 图像，否则可以使用 jpg？

例如，如果我链接到路径为 /images/test 的图像，如果 UA 知道 webp，它会提供在 /images/test.webp 中找到的图像，否则会提供 jpg？

我试过四处寻找，但似乎 Chrome 中的 Accept 标头至少看起来像Accept:*/*，而不是指定图像类型。

如果这不是这样做的方法，有没有人有任何其他建议？

4

2 回答 2

2

为了提供 WebP 图像，我在 nginx 中使用重写规则来检查文件是否存在并支持 WebP 图像。由于 OP 提到了 mod_negotiation，我将它移植到了 Apache mod_rewrite。重写查找包含单词“chrome”的用户代理，然后检查扩展名为 .webp 的文件，该文件与 .jpg 或 .png 文件具有相同的名称和路径，如果是，则为 WebP 文件提供服务。重写规则有点笨拙，但它完成了工作。

AddType image/webp .webp
# strip the extension off of all JPGs
RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]
RewriteRule (.*)\.jpg$ $1

#check for a webp file, if so serve it
RewriteCond   %{REQUEST_FILENAME}.webp  -f
RewriteRule   (.*)  $1.webp [E=WEBP:1]

#check for if we did not have a webp file and we do have a jpg, if so serve it
RewriteCond   %{REQUEST_FILENAME}.jpg  -f
RewriteCond   %{REQUEST_FILENAME}.webp  !-f
RewriteRule   (.*)  $1.jpg

# strip the extension off of all PNGs
RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]
RewriteRule (.*)\.png$ $1

#check for a webp file, if so serve it
RewriteCond   %{REQUEST_FILENAME}.webp  -f
RewriteRule   (.*)  $1.webp [E=WEBP:1]

#check for if we did not have a webp file and we do have a png, if so serve it
RewriteCond   %{REQUEST_FILENAME}.png  -f
RewriteCond   %{REQUEST_FILENAME}.webp  !-f
RewriteRule   (.*)  $1.png

对于我的网站，当我检测到浏览器中对 WebP 的支持而不是依赖用户代理字符串后，我可以通过 JavaScript 加载我的照片。如果存在 WebP 支持，那么我会在开始加载图像之前设置一个 cookie。因此，而不是这个 RewriteCond

RewriteCond %{HTTP_USER_AGENT} (chrome) [NC]

我会用这个

RewriteCond %{HTTP_COOKIE} supports_webp
于 2011-06-23T22:42:53.737 回答
1

Accept 标头不是必需的，当提供有意义的值时，它只是向服务器指示客户端应针对该特定请求接收哪些内容类型。

在过去，就像当 png 没有得到很好的支持时，我使用了这样的规则（适应你的问题）。两种浏览器都支持 Webp，使得规则非常简单。

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} \ Chrome/ [OR]
RewriteCond %{HTTP_USER_AGENT} Opera.*Version/11.1
RewriteRule .* - [E=imgext:webp,T=image/webp]

RewriteCond %{ENV:imgext} !webp
RewriteRule .* - [E=imgext:jpg]

RewriteCond %{REQUEST_URI} ^/images/
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule (.*) $1\.%{ENV:imgext} [QSA]
于 2011-06-23T22:42:10.443 回答