Most browsers can natively lazy load images

I just learnt that most browsers natively support lazy loading images. It’s remarkably easy to use this feature. You can simply add the attribute loading='lazy' to your images, and then the browser will only load them when they come into view. Apparently this also works for iframes. Sick.

<img loading='lazy' src="images.johnwhiles.com/1735220926159-IMG_1040.jpeg" alt="lazy" />

Time marches ever onwards. Browsers keep getting better.

Since I started working as web developer in 2017, I’ve implemented at least two custom lazy loading image components. If I had been asked to do the same again tomorrow I wouldn’t have thought to check whether this was now a widely supported browser feature. If someone could send me a weekly summary of what new features are being added to web browsers I'd really appreciate it! I’m currently waiting for masonry

Anyway here's a picture. If you have a really tiny screen it might have been lazy loaded!