How to Avoid Lazy Loading for a Single Image on WordPress Without a Plugin.

  • Post author:

I’ve spent a good while of my Sunday afternoon finding out how to lazy load just one entire image on WordPress. As you might know, WordPress loads per default all images with the lazy tag. But when an image is above the fold, you want to disable the lazy loading for SEO reasons.

Without any further delay, here’s the fix:
1. Copy the code below:

/* Disable lazy loading for single image* */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 36, 'large' ); 
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );

2. Replace 36 with the image id of your image.
You find the image id in the code editor of the WordPress site.

screenshot of code editor in WordPress to inspect image id

3. On WordPress go to Appearance > Theme Editor > functions.php
4. Insert the code snippet there
5. Hit the “Update File” button

That’s it! I hope it saves you some time.

Leave a Reply