Caveats of delivering WebP or AVIF images via .htaccess
Delivering WebP or AVIF images via .htaccess is something you can do with ShortPixel Image Optimizer. You just need to activate the option " Without altering the page code (via .htaccess)" located on Settings > ShortPixel > Advanced > Next Generation Images > Deliver the next generation versions of the images in the front-end.
Due to the huge variety of possible server configurations out there, using the .htaccess file to deliver the WebP or AVIF versions of your JPG/PNG files seamlessly (without altering the page code) has some caveats you should be aware of.
- This option does not work out of the box with some websites using a CDN, Cloudflare in particular. That's why, if you are using a CDN, make sure it supports the
Varyheader and it is correctly configured to serve WebP and/or AVIF from the same URL based on the browser capabilities, so that it knows (and will cache and serve accordingly) that there are 2 different files to be served for the same URL, depending on the
Acceptheader sent by the browser.
- If you are using a CDN and it doesn't support the
Varyheader, you shouldn't use this solution at all, or you may end up serving wrong image formats. Instead, use the ShortPixel's native delivery method "Using the <PICTURE> tag syntax". For more information, visit this page.
- Examples: bunny.net / Cloudflare
- This option won't work either with solutions like Varnish.
- Your files will be WebP, but the original extension of your file will not change. Example:
- The current code block our plugin is inserting in your .htaccess file represents the version we found to be most successful at accomplishing this task. We have sites it works on and sites it doesn't work on. The results vary, as expected.
- Should you find a better version, you are free to use a file manager and edit the block of code yourself (you should absolutely know what you're doing, otherwise you risk breaking your site). Hey, if you find something better, drop us a line too!
- We included a very simple test in the Advanced settings of our plugin, right under the "Without altering the page code (via .htaccess)" option, where you can see if your particular server "CAN" or "CAN'T" accomplish this (in other words, if our best effort code version really works out for you or not). While not fixing any issues in itself, this simple test can at least let you know on the spot if the WebP or AVIF images will or will not be loaded in your pages when served via .htaccess. This way you can take an easier and faster decision on what option to use.
If you cannot use this method for any reasons, then you should try an alternative solution for serving WebP or AVIF images like: