Disable LazyLoad on specific images

You can use the Excluded images or iframes field in the plugin settings to disable lazyloading on images and background images.

To exclude the images, you can use any of these keywords from the image markup:

• Filename
• Any attribute in the <img> tag. Note: attributes of parent elements don't work.
• Domain name, for externally hosted images. 
• CSS class of the container, for background images.
• CSS filename, for background images added from a CSS file. Note: all images in the CSS file will be excluded.

And, in case there are, multiple exclusions need to be added one per line.

Example

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:

• Filename: daniele-riggi-635135-unsplash.jpg
• Class: attachment-full size-full - this will exclude all images with both these classes
• Class: attachment-full or size-full -  this will exclude images with either specific class
• -unsplash - this will also exclude any other image with -unsplash in the filename
• Contents of the alt text: unsplash image
• Contents of title attribute: image title
• Custom attribute name: data-imgsrc

Note: The keywords (filenames, CSS classes, CSS ids, alt texts, title attributes,  attribute names) can be found in the source code of the page.

Exclude images from LazyLoad per page

You can also disable LazyLoad for your images using the following helper plugin. This plugin lets you disable LazyLoad for specific images on selected pages (by page slug), while still having the image lazyloaded on other pages.

📥 Download (.zip): WP Rocket | Exclude images from LazyLoad per page
Developers: You can find the code for this plugin on GitHub.

Heads up! The helper plugin doesn't work on its own. Manual code edit is required before use!

Use the README.md file for the specific details about how to apply each customization.

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.