Manually Apply LazyLoad to an Image

WP Rocket automatically applies LazyLoad to images that are added via the Post/Page editor, or called via native WordPress functions such as the_post_thumbnail().

However, some themes or plugins use their own custom functions, and WP Rocket cannot detect images added by those. In this case there are 2 alternative ways to manually add LazyLoad to those images:

A
Edit the HTML image tag itself and modify the src and data-lazy-src attributes as shown here. Replace the sample values for image URL, width, and height; please add your own.

<img src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" data-lazy-src="http://example.com/image.jpg" alt="" width="600" height="400" />
	
B
Add it to the PHP template file:

<?php
$image = get_field( 'image' );

if( ! empty( $image )
   && function_exists( 'get_rocket_option' )
   && get_rocket_option( 'lazyload' 
) : ?>
	<img src="data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=" data-lazy-src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php elseif( ! empty( $image ) ) : ?>
	<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>