HTML · The document layer
How does lazy loading work for images?
Short answer
loading=lazy defers off-screen images until they are near the viewport. Set width and height to reserve space and avoid layout shift, and do not lazy-load the main hero image.
Lazy loading saves bandwidth and main-thread work by delaying images the user may never see. The browser decides when to fetch based on the distance from the viewport, so you do not need a scroll listener.
<img
src="/hero.jpg"
alt="Team working together"
width="1200"
height="600"
fetchpriority="high"
/>
<img
src="/gallery-1.jpg"
alt="Office reception"
width="600"
height="400"
loading="lazy"
/>Doing it well
- Use loading=lazy for images below the fold
- Keep the main hero or largest contentful image eager
- Always set width and height or an aspect ratio to prevent layout shift
- Native lazy loading is simple; IntersectionObserver is for more control
- A lazy image still needs a meaningful src and alt
Lazy loading too aggressively can delay visible content and hurt perceived performance. The browser already prioritises what is in the viewport, so the attribute is mainly a hint for the rest of the page.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Should the hero image be lazy loaded?
- 2Why set width and height on lazy images?
- 3When would you use IntersectionObserver instead?
- 4Does lazy loading affect SEO?
Say it in the interview
loading=lazy tells the browser to defer images that are far from the viewport, which saves bandwidth and work. I use it for below-the-fold images and keep the hero eager, often with fetchpriority=high. I always set width and height so the space is reserved and the page does not shift. For more control I can use IntersectionObserver, but the native attribute covers most cases.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.