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.
- If you optimized your entire Media Library before selecting the "Create WebP versions of the images" option, check out this article: I optimized already all the images but then I realized that I didn't select the option to generate next-gen images, what can I do?
- Sometimes the WebP or AVIF versions of a file are intentionally not created because they may be larger than the original image. So, since they don't exist, they won't be delivered to your users. For more information, see this article: Why is my image not converted to WebP or AVIF?
Now, 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 theAcceptheader 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 correctly with solutions like Varnish.
- 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!
- Your files will be served as WebP or AVIF, but you will see the original file extension in the browser. Example:
- 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 format files when supported.
- Add ShortPixel Adaptive Images to your site and use it to serve the next-gen images. Read more about the differences between ShortPixel Image Optimizer and ShortPixel Adaptive Images here: ShortPixel Adaptive Images vs. ShortPixel Image Optimizer.
- Use another plugin to deliver the WebP/AVIF files created by ShortPixel, such as Cache Enabler or WP Rocket.
- If you use LiteSpeed Cache, you can use it to deliver the WebP files generated by ShortPixel.