Exclude some site parts from WebP / picture tag replacement
There is no setting to exclude images just from being replaced with WebP based on a pattern / CSS class, but there are some workarounds for that:
- If the images that appear in a section of the site (like for example WooCommerce galleries) have a particular name convention (let's say they all start with "myWoo_") you could use the Exclude Patterns setting located on Settings > ShortPixel > Advanced. Following the previous example, you would have to input name:myWoo_ into that settings field). The downside is that they won't be optimized either.
- Just optimize the specific images you want with the WebP setting (Settings > ShortPixel > Advanced > WebP Images) off. This will not generate the WebP and thus make the plugin not replace the <img> with <picture>. The downside is that if the image appears in other places too, it will appear as .png/.jpg there too. Bear in mind that if you already optimized those images with the WebP setting on, you should first restore them and then re-optimize them with the WebP setting off.
- A third option, especially useful if you don't want to spend credits re-optimizing your images with the WebP setting off: delete the .webp counterparts of the images you want from your server. This way, ShortPixel will see there is no .webp and will serve the JPG/PNG instead.
You could also fix the problem by still delivering WebP but without the picture tag:
- Use the .htaccess approach which delivers the WebP transparently using the same URL. You need to make sure you're not using a CDN though. If you use Nginx you can configure it by hand like it's described here: https://shortpixel.helpscoutdocs.com/article/111-configure-nginx-to-transparently-serve-webp-files-when-supported
- Use the ShortPixel Adaptive Images plugin, which will use lazy-loading to deliver a WebP picture instead of the original format, on compatible browsers. This plugin does much more than this: will adapt the images size to the exact needed screen size for that device, will serve the images from our CDN, etc. You can read more here: https://shortpixel.helpscoutdocs.com/article/179-shortpixel-adaptive-images-vs-shortpixel-image-optimizer.