Native Lazy Loading Responsive Images in WordPress

Starting with version 76, Google Chrome supports lazy loading of images and iframes natively.

This tutorial shows how loading="lazy" can be added to the images output by the_post_thumbnail()using the post_thumbnail_html filter hook.

the_post_thumbnail() is one of the WordPress functions for displaying native responsive images that include srcset and sizes attributes. This way, instead of the largest image size loading on all screen sizes, the closest sized image will be loaded by the browser thus saving server bandwidth and improved load times for the visitors.

Example:

Before:

<img width="1600" height="1143" src="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg 1600w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-300x214.jpg 300w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-768x549.jpg 768w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-1024x732.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">

After:

<img loading="lazy" width="1600" height="1143" src="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94.jpg 1600w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-300x214.jpg 300w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-768x549.jpg 768w, https://srcset.wpdd.site/wp-content/uploads/sites/9/2019/08/kkysaocve94-1024x732.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">

Note: Native browser lazy loading does not behave like the “traditional” JS-based lazy loading that we are accustomed to where the images fade into view as they are scrolled to in the viewport. Google’s approach seems more about efficiency and performance than visual smoothness.

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add loading="lazy" attribute to images output by the_post_thumbnail()

Code:

add_filter( 'post_thumbnail_html', 'wpdd_modify_post_thumbnail_html', 10, 5 );
/**
 * Add `loading="lazy"` attribute to images output by the_post_thumbnail().
 *
 * @param  string $html	The post thumbnail HTML.
 * @param  int $post_id	The post ID.
 * @param  string $post_thumbnail_id	The post thumbnail ID.
 * @param  string|array $size	The post thumbnail size. Image size or array of width and height values (in that order). Default 'post-thumbnail'.
 * @param  string $attr	Query string of attributes.
 * 
 * @return string	The modified post thumbnail HTML.
 */
function wpdd_modify_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {

	return str_replace( '<img', '<img loading="lazy"', $html );

}

That’s it!

To see if lazy loading is working or not, open DevTools in Chrome and go to Network > Img.

Reload your page and after the page loads, scroll down the page and you can see details of the images that are lazy loaded along with increase in the number of requests.

Only the images that are below the fold will get lazy loaded. Also, not all the images below the fold may get lazy loaded. It depends on several factors like your visitors’ internet speed. See Google’s page for more information.

Reference

https://developer.wordpress.org/reference/hooks/post_thumbnail_html/