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 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/AVIF replacement happens at the server level. Every time a JPG or PNG is requested, the WebP/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.
Note: Make sure to read Delivering WebP or AVIF images via .htaccess for additional details about this delivery method, including particular things you need to take into account.
If your website is on an NGINX server, you won't be able to enable this option. Therefore, you should use the first method mentioned above, or configure NGINX to transparently serve WebP files when supported.
If neither delivery methods work for you, consider replacing ShortPixel Image Optimizer with ShortPixel Adaptive Images.