Manually Apply LazyLoad to an Image (Deprecated)

⛔️ Deprecated: As of WP Rocket 3.3, LazyLoad is automatically applied on all images

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: 
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/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-lazy-src="http://example.com/image.jpg" alt="" width="600" height="400" />

Or 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' )
	&& ! ( defined( 'DONOTROCKETOPTIMIZE' ) && DONOTROCKETOPTIMIZE )
) : ?>
	<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" 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; ?>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.