💤 Lazy loading images: how the loading attribute works

Lazy loading (loading="lazy") is a way to load an image only when it’s actually needed by the user — for example, when they’ve scrolled to it on the page.

Here’s what it gives you:

• 🏃‍♂️ Faster page load times — the browser doesn’t load everything at once.
• 📉 Reduced initial page weight — especially on media-heavy pages.
• 📈 Improved Core Web Vitals (LCP, FCP) — critical for SEO and Google ranking.
• 📱 Saves mobile user traffic — unused images don’t waste bandwidth.
• 🔧 Reduces load on servers and CDNs — since unused images may not be loaded at all.

Previously, to load an image only when needed, we had to:

• Include heavy libraries,
• Write hacks using IntersectionObserver,
• Mess with requestIdleCallback, setTimeout, scroll events,
• Test across different browsers — custom solutions didn’t always behave the same,
• Write polyfills or fallbacks for legacy support.

It was painful.
But now — it’s different.

🚀 HTML does lazy loading natively

With the loading attribute, the browser decides on its own when to load an image or iframe.

<img src="pokemon.png" loading="lazy" alt="pokemon pikachu" />

💡 Works out of the box. Supported in most modern browsers.

📖 Support: caniuse.com/loading-lazy

🧩 The two loading values

🖼 Example with <picture>

Yes, it works inside the <picture> tag:

<picture>
	<source media="(min-width: 768px)" srcset="test.jpg 1x, larger.jpg 2x" />
	<img src="pokemon.jpg" loading="lazy" alt="pokemon pikachu" />
</picture>

📺 Works with <iframe> too

<iframe
	src="https://www.youtube.com/watch?v=-R_3t7sHZVA"
	loading="lazy"
	width="630"
	height="420"
	title="Pokemon video"
/>

🧠 When to use loading="lazy"

• Image galleries or product catalogs
• Blogs and long-form content with media
• Preview cards and content blocks
• Embedded videos or maps below the fold

📌 Summary

The loading attribute is a simple way to:

• 🚀 Speed up your site,
• 📉 Reduce unnecessary requests,
• 🤖 Get native behavior with no JS or hacks.

Enable it. Use it. And let your pages load not only beautifully — but fast.