Disabling LazyLoad on Specific Images

WP Rocket 3.8+

From WP Rocket 3.8, there is a field in the plugin settings to exclude images and iframes from LazyLoad:

To exclude an image, use any keyword from the image filename, its CSS class, or domain name (for externally hosted 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" />

You could use any of the following:

daniele-riggi-635135-unsplash.jpg
attachment-full size-full - this will exclude all images with both these classes
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

WP Rocket versions prior to 3.8

The following methods are backwards compatible and will continue to work.

Disable LazyLoad on an image

If you want to disable LazyLoad on a specific image, you can do so by adding either:

the data-skip-lazy attribute
or the skip-lazy class

to the img HTML tag.

Examples:

<img src="my-image.jpg" data-skip-lazy="" alt="" width="100" width="100" />

<img src="my-image.jpg" class="skip-lazy" alt="" width="100" width="100" />

These are available from WP Rocket 3.5 and are part of a cooperation between plugin authors of LazyLoad solutions to standardize exclusions. That means if you switch between one of the cooperating plugins and are using one of these exclusion methods, it will still apply in the alternate solution.

If you were previously using data-no-lazy, this will still work for WP Rocket specifically.

Disabling LazyLoad on an image class

You can target a specific class to exclude from LazyLoad by using the following:

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="divi-slider"';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

In this example, the class name(s) assigned to $attributes must exactly match the HTML markup. If the actual class attribute is class="divi-slider something-else", the code above will not work.

The following example addresses images with more than one class name:

class="some-image-123 attachment-post-thumbnail size-post-thumbnail wp-post-image"

In that case, you can just remove the double quotes at the end, so the keyword for WP Rocket’s detection stays “open”:

$attributes[] = 'class="some-image-'; // note the missing double quotes at the end!

This would exclude all images with a class of some-image-123, some-image-bla-bla, some-image-whatever-else etc. from being lazy-loaded, regardless of any additional class names they might have.

You may use our helper plugin below to implement these exclusions. It's a boilerplate, you must modify it first to specify your exclusions.

📥 Download (.zip): WP Rocket | No LazyLoad for Custom Image Classes Developers: You can find the code for this plugin on GitHub.

Disabling LazyLoad by image source

You can target an image by any part of its src.

Example 1: Exclude an image from a specific domain

In this example, images served from wp.com will be excluded from LazyLoad:

function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'wp.com';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

Example 2: Exclude an image based on its filename

In this example, any image with caramel-mocha-filled-cupcake in the filename will be excluded. That would include, for example, both: caramel-mocha-filled-cupcake-300x300.jpg and caramel-mocha-filled-cupcake-100x100.jpg

function rocket_lazyload_exclude_src( $src ) {
	$src[] = 'caramel-mocha-filled-cupcake';

	return $src;
}
add_filter( 'rocket_lazyload_excluded_src', 'rocket_lazyload_exclude_src' );

You may use our helper plugin below to implement these exclusions. It's a boilerplate, you must modify it first to specify your exclusions.

📥 Download (.zip): WP Rocket | No LazyLoad for Custom Image Sources Developers: You can find the code for this plugin on GitHub.

Disabling LazyLoad on avatars

If you want to disable Lazyload on your website's avatars, you can do so by adding this code to a custom plugin:

remove_filter( 'get_avatar', 'rocket_lazyload_images', PHP_INT_MAX );