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 > WebP/AVIF & CDN > Serve WebP/AVIF images from locally hosted files (without using a CDN).

First of all, make sure you understand the following:

• 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 WebP or AVIF, what can I do?
• Sometimes the WebP or AVIF versions of a file are intentionally not created because they are larger than the original image. Therefore, since they don’t exist, they won’t be served 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 because it does not support the Vary header (see next bullet)
• 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 Vary header 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 Accept header sent by the browser.
  • Examples: bunny.net / Cloudflare
  • If you are using a CDN that does not support the Vary header, 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.
• For the same reason, this method may not work correctly with solutions like Varnish either.
• 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!
• if you use Cloudways, enable the WebP Redirection as per the instructions here (step #2). If you choose this option, remember to disable the “Serve WebP/AVIF images from locally hosted files” completely.
• 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 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 second local WebP/AVIF delivery option built into SPIO (using the <PICTURE> tag syntax): WebP instructions / AVIF instructions
• Deliver images using the ShortPixel CDN in SPIO.
• 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.