Which WebP or AVIF delivery method is the best for me?
The ShortPixel image optimization plugin for WordPress can help you generate WebP and/or AVIF versions of your images. That's why we also implemented a few solutions for delivering them to the compatible browsers. Each of them is reversible, and we recommend you to make some tests before choosing which solution is the best for you.
The recommended method is: Without altering the page code (via .htaccess).
- Using the <PICTURE> tag syntax: Each
<img>tag on your pages is replaced with a
<picture>tag. For browsers that don't support the
<picture>tag, the picturefill.js file will be loaded. Using the
<picture>tag means that there is a fallback in case a browser cannot display WebP or AVIF images. You have 2 ways to use this method:
- Only via Wordpress hooks: It works better when you use image slider plugins, but there could be images that aren't served as WebP/AVIF in the compatible browsers. This is a more limited, but a bit safer method.
- Global. This method fits the most use cases, but there could be a few situations when it breaks the image sliders / gallery plugins. This method ensures more independence from any third-party tools that might not operate through the official WordPress channels and methods.
Please note that this method might not work properly with some third-party plugins and/or styles that depend on
<img>tags, so using the <PICTURE> tag syntax is the least recommended method.
Without altering the page code (via .htaccess): A small piece of code is added to your .htaccess file, so the WebP and AVIF replacement is happening at the server level. Every time a JPG or PNG is requested, its WebP or AVIF counterpart is delivered instead (if they exist, of course). This method is better performance-wise and it does not depend on how your website is built, so it is more effective. Make sure to read the following article to know everything you need to take into account: Delivering WebP or AVIF images via .htaccess.
If your website is on an NGINX server, you won't be able to use this option. Therefore, you should use the method #1 explained above, or configure ShortPixel Image Optimizer to work with Nginx web server.
If neither of these WebP or AVIF delivery methods work for you, give ShortPixel Adaptive Images a try!