Forem

Corey Alexander
Corey Alexander Subscriber

Posted on • Originally published at coreyja.com on

TIL: HTML image lazy loading

TLDR: Add loading=lazy to HTML images for the Browser to load them as the user scrolls


For my blog and personal site, I wanted images to lazy load in as you scroll down the page. This makes for a better reading experience when there are lots of images on a single page. It also stresses out my server less, as only the images people actually scroll to are ever downloaded.

In the past I've used various JS frameworks and tool to accomplish this, but now we can do it natively in HTML! All you need to do is add the loading="lazy" attribute to your images! MDN Attribute Link

CanIUse shows that there is ~93% compatibility for the loading attribute when applied to images. So for most of my use cases this will do perfectly! loading can also be applied to iframes but the browser compatibility for this is a bit lower at ~81%. [Mobile Safari on older versions is most of the difference here]

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay