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.

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

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.