ShortPixel Image Optimizer (SPIO) can help you generate WebP and/or AVIF versions of your images. That’s why we have also implemented a few solutions for delivering them to compatible browsers. Each of these solutions is reversible and we recommend you do some testing before deciding which one is best for you.
Using the <PICTURE> tag syntax #
Each <img> tag on your pages will be replaced with a <picture> tag. For browsers that don’t support the <picture> tag, the picturefill.js file is loaded. Using the <picture> tag means that there is a fallback if a browser cannot display WebP or AVIF images. Please note that this method may not work properly with some third-party plugins and/or styles that depend on <img> tags. Therefore, this is the least recommended method. You have 2 ways to use this method:
- Only via WordPress hooks: It works better if you use image slider plugins, but there might be images that do not render as WebP/AVIF in the compatible browsers. This is a more limited, but somewhat safer method.
- Global: This method is suitable for most use cases, but there might be some situations where it interferes with image slider/gallery plugins. This method ensures greater independence from third-party tools that may not work through the official WordPress channels and methods.
Without altering the page code (via .htaccess) #
A small piece of code is added to your .htaccess file so that WebP/AVIF replacement occurs at the server level. Each time a JPG or PNG image is requested, the WebP/AVIF counterpart is delivered instead (if available, of course). This method is better in terms of performance and does not depend on how your website is built because the delivery is technically taken care of by your server, not by WordPress, so it is more effective than the previous.
Using the ShortPixel CDN #
This method replaces any image URLs with CDN URLs while keeping the canonical URLs pointing to your own website. This ensures no impact on your website’s SEO or the indexing of your images. This delivery method works on any hosting environment without needing further configuration. The URL replacement occurs dynamically as the page loads, so the original URL remains untouched.
We recommend you use this if neither of the previous methods work for your specific case or if you simply would like to take advantage of an image CDN and therefore take load off your server.
Alternatives #
If neither delivery method works for you, please consult this article to learn more about alternatives.