Disabling LazyLoad on Specific Images
You can use the field in the plugin settings to exclude images and iframes from LazyLoad:
To exclude an image, use any keyword from the image tag such as: filename, CSS class, any attribute, or domain name (for externally hosted images).
Note: All exclusion methods can be used for background images as well as standard images.
If you would like to exclude the following image:
<img src="http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg" class="attachment-full size-full" data-imgsrc="http://www.example.org/wp-content/uploads/daniele-riggi-635135-unsplash.jpg" alt="unsplash image" title="image title"/>
You could use any of the following:
attachment-full size-full- this will exclude all images with both these classes
size-full- this will exclude images with either specific class
-unsplash- this will also exclude any other image with
-unsplashin the filename
- Contents of the alt text:
- Contents of title attribute:
- Custom attribute name:
Tip for Elementor images widget
Images integrated with the Elementor image widget can be problematic to exclude sometimes. Using a CSS class does not work because Elementor is not adding it to the image tag but to a parent div tag, so you’ll have to put every single filename in the exclude settings.
A workaround is possible with this plugin: https://wordpress.org/plugins/add-class-to-elementor-image/.
Just add this class
no-lazy in WP Rocket's LazyLoad exclusion field and add
no-lazy in the Custom Class field of every image you don’t want to be LazyLoaded by WP Rocket.