2

It is quite easy to create a rule in .htaccess that serves WebP images when the browser supports it (RewriteCond %{HTTP_ACCEPT} image/webp) and the proper file exists on Your webserver.

For my next project, I'm considering firebase hosting and I'd like to serve WebP images.

Because firebase doesn't support .htaccess I can't reuse rules I have.

Can I rewrite requests to png and jp(e)g files to go to webp files, of course, if that file exists and browser supports webp?

.htaccess file I use for reference looks like this:

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

Is adding picture element with additional source my only option or can this be done on 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>
Misiu
  • 4,738
  • 21
  • 94
  • 198

1 Answers1

1

There is no support for browser detection in Firebase Hosting's firebase.json configuration file. The rewrites are much less advanced than those of your .htaccess example.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807