Last updated on July 19th, 2024.
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, since the WordPress 5.5 updates, WordPress loads all images with the lazy tag per default.
But when an image is above the fold, I advise disabling lazy loading as it can delay the largest contentful paint. And for SEO reasons we don’t want any delay there.
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', 36, 36 );2. In the fourth and in the last line you see the value 36. This is the image id number of the image I want to change.
Replace the 36 with the image id of your image.
You find the image id in the code editor of the WordPress page/post. Here’s how to find it:
- Click on the three dots in the upper right
- Select the Code editor or use the shortcuts: ⇧⌥⌘M for Mac and Ctrl + Shift + Alt + M for Windows
- find the image id in the code
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!
In the video below, I walk you live through every step.
If you feel like contributing to my coffee spend, you can do so here: buymeacoffee.com/corinaburri
Thank you!
Thanks for the tip !
Just have a question, what is the “add filter” part on the bottom with some IDs ?
Hi Thomas
Thanks for pointing that out. tbh, the ids were a copy-paste error.
The values in the last line should be the ids of the specific image you want to lazy load.
I’ve updated the manual accordingly.
Thanks for bringing my attention to it.
Corina
Hey there, I’ve used a code add_filter(‘wp_lazy_loading_enabled’,’__return_false’); in the function.php and that’s working for the homepage first image but it doesn’t lazy load the post featured image. How to lazy load post featured images? Please assist me in a better way. Your favor in this regard would be greatly appreciated. Thank you
Regard,
Atif
Thank you! This solved a loading bug in Safari!
Jaci
Hey, I’ve entered the script in my site (elementor + breeze) but it didn’t remove the tag, might there an issue with Elementor?
Hi Mike! Thank’s for asking. Unfortunately, I’m not familiar with Elementor. Fingers crossed, you’ll find the answer soon and feel free to share the solution!
I’m using Kadence and added the code with ‘code snippets’ to the php but it’s not working. Any ideas?
Hi Andy
Unfortuneately, I don’t have the Kadence theme on none of my website. Therefore I’m not ableo to reproduce the lazy loading for one image with Kadence, I’m afraid.
Anyone else is able to jump in and help Andy?
Best,
Corina
Hi Corina,
thank you very much! It really helps.
It helps so good, I would like to add this to all the images above the fold on the other pages of my site. Is that possible with this snippet? If so, how?
Thanks again
Kind regards
Geert
Hi Corina,
just wondering: would it also be possible to avoid lazy load on the first image of a page? So not a certain ID, but the first embeded image?
Hi, very nice. But it doesn’t help me if I have a block with background image, does it? There is no ID (which I could find in another way) and there is no Lazy Loading class on bg images.
Hello Corina,
I gave it a try on two websites with large images on the Home pages, But it did not seem to work on either. On checking further, it seems there is a PHP parse error:
`[17-May-2023 11:17:44 UTC] PHP Parse error: syntax error, unexpected identifier “lazy” in /themes/twentyeleven_apsara_child/functions.php on line 13`. I am using PHP 8.0.