Firebase在浏览器支持的情况下提供webp服务-条件重写

在浏览器支持的情况下（

RewriteCond%{HTTP_ACCEPT}image/WebP

），在

.htaccess

中创建一条规则，为WebP图像提供服务，并且您的Web服务器上存在适当的文件，这非常容易

对于我的下一个项目，我正在考虑firebase托管，我想提供WebP图像

因为

.htaccess

我不能重用我的规则

当然，如果存在png和jp（e）g文件，并且浏览器支持webp，我是否可以将请求重写为指向webp文件的png和jp（e）g文件

.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>

重新启动发动机
重写cond%{HTTP_ACCEPT}image/webp
重写cond%{DOCUMENT_ROOT}/wp content/$1.webp-f
重写规则^/？（.+）\（jpe？g|png）$$1.webp[T=image/webp，E=EXISTING:1，E=ADDVARY:1，L]
SetEnvIf请求URI“\（jpe？g | png）$”ADDVARY
SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
SetEnvIf重定向_ADDVARY 1 ADDVARY=1
标题追加“更改”“接受”env=ADDVARY
AddType image/webp.webp

添加带有附加源的图片元素是我唯一的选择还是可以在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>

---

Firebase主机的

Firebase.json

配置文件中不支持浏览器检测。与您的

.htaccess

示例相比，重写的高级程度要低得多。

Firebase主机的

Firebase.json

配置文件中不支持浏览器检测。与

.htaccess

示例相比，重写的高级程度要低得多