Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For serving WebP images, I use a rewrite rule in nginx that checks for the existence of the file and support for WebP images. I ported it over to Apache mod_rewrite since the OP mentioned mod_negotiation. The rewrite looks for a User Agent containing the word "chrome" and than checks for a file with a .webp extension with the same name and path as the .jpg or the .png file and if so serves the WebP file. The rewrite rule is a bit kludgy but it gets the job done. </p> <pre><code>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 </code></pre> <p>For my site, I have the luxury of being able to load my photos in via JavaScript after I can detect the support for WebP in the browser instead of relying on the user agent string. If WebP support exists than I set a cookie before I begin loading in my images. Therefore instead of this RewriteCond </p> <pre><code>RewriteCond %{HTTP_USER_AGENT} (chrome) [NC] </code></pre> <p>I would use this</p> <pre><code>RewriteCond %{HTTP_COOKIE} supports_webp </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload