Which WebP or AVIF delivery method is the best for me?

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.

1. 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:
   1. 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.
   2. 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.

   Be sure to read this article for more details about this delivery method, including certain things you need to be aware of.

   

2. 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, so it is more effective and therefore it is the recommended method.
   
   

   Be sure to read this article for more details about this delivery method, including certain things you need to be aware of.

   

If neither delivery method works for you, please consult this article to learn more about alternatives.