Caveats of delivering WebP or AVIF images via .htaccess
With ShortPixel Image Optimizer you can deliver WebP or AVIF images via .htaccess. You just need to enable the "Without altering the page code (via .htaccess)" option, which you can find at Settings > ShortPixel > Advanced > Next Generation Images > Deliver the next generation versions of the images in the front-end.
Due to the variety of possible server configurations, you need to consider some caveats when using the .htaccess file to seamlessly deliver the WebP or AVIF versions of your JPG/PNG files (without altering the page code).
- This method does not work for websites with Cloudflare's free plan.
- If you are using a CDN provider that is not Cloudflare, or if you have a paid plan from Cloudflare, you need to make sure it supports the
Varyheader and is properly configured to deliver WebP and/or AVIF from the same URL based on browser capabilities so that it knows (and caches and delivers accordingly) that there are 2 different files to deliver for the same URL depending on the
Acceptheader sent by the browser.
- Examples: bunny.net / Cloudflare
- If you are using a CDN that does not support the
Varyheader, or if you do not have the technical knowledge to implement it, you should not use this solution at all, or you may end up serving WebP/AVIF images to browsers that do not support them. Instead, use one of the alternative solutions described at the end of this article.
- This method also does not work with solutions like Varnish.
- Your files will be served as WebP or AVIF, but you will see the original file extension in the browser. Example:
- The current block of code that our plugin inserts into your .htaccess file is the version that we find does the job best. We have websites where it works, and websites where it does not. The results, as expected, vary.
- If you find a better version, you are free to use a file manager and edit the code block yourself (be sure you know what you are doing, or you risk breaking your site). Hey, if you find something better, drop us a line too!
- We have included a very simple test in the Advanced settings of our plugin, right under the "Without altering the page code (via .htaccess)" option, that will let you see if your particular server "CAN" or "CAN'T" achieve this (in other words, if our best-effort code version really works for you or not). This simple test will not fix any problems, but it will at least show you on the spot whether the WebP or AVIF images in your pages are loaded or not when delivered via .htaccess. This way you can more easily and quickly decide which option to use.
If you cannot use this method, you should try an alternative solution for next generation image delivery:
- Use the first WebP/AVIF delivery option built into SPIO (using the <PICTURE> tag syntax): WebP instructions / AVIF instructions
- If you have an NGINX server, you can configure NGINX to transparently serve next-gen files when supported: WebP instructions / AVIF instructions
- Replace ShortPixel Image Optimizer with ShortPixel Adaptive Images.
- Use another plugin to deliver the WebP/AVIF files created by ShortPixel.