Question

在.htaccess中创建一条规则，以在浏览器支持WebP图像（RewriteCond %{HTTP_ACCEPT} image/webp且您的Web服务器上存在适当的文件时）为WebP图像提供服务非常容易。

对于下一个项目，我正在考虑使用Firebase托管，并且希望提供WebP图像。

因为firebase doesn't support .htaccess我无法重复使用已有的规则。

如果该文件存在并且浏览器支持webp，我可以重写对png和jp（e）g文件的请求以转至webp文件吗？

我供参考的

.htaccess文件如下：

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/$1.webp -f
  RewriteRule ^/?(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  <IfModule mod_setenvif.c>
    SetEnvIf Request_URI "\.(jpe?g|png)$" ADDVARY
  </IfModule>

  <IfModule mod_headers.c>
    <IfModule mod_setenvif.c>
      SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
      SetEnvIf REDIRECT_ADDVARY 1 ADDVARY=1

      Header append "Vary" "Accept" env=ADDVARY

    </IfModule>
  </IfModule>

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

添加图片元素是唯一的选择，还是可以在firebase上完成？

<picture>
    <source type="image/webp" media="(min-width: 1921px)" srcset="src/images/very-large/bike.webp">
    <source type="image/png" media="(min-width: 1921px)" srcset="src/images/very-large/bike.png">
    <img src="src/images/bike-2003909.png" style="width: 100%;">
</picture>

Answer 1

Firebase Hosting的firebase.json配置文件中不支持浏览器检测。重写比您的.htaccess示例中的重写要先进得多。

当可用并受浏览器支持时，Firebase提供Webp-有条件的重写

1 个答案: