When should you lazy-load images?

Lazy-load images that start outside the viewport, but do not lazy-load a likely largest-contentful-paint hero image.

HTML & CSS#images#performance

THE ANSWER / PLAIN ENGLISH

The idea to remember.

Lazy-load images that start outside the viewport, but do not lazy-load a likely largest-contentful-paint hero image. Give images dimensions to reduce layout shifts.

01Learn by doing

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: meaningful markup

01 / BEGINNER

Native HTML elements give browsers and assistive tech useful semantics.

HTML / EXAMPLE

<nav aria-label="Main navigation">
  <a href="/explore/questions">Interview questions</a>
</nav>
<main><h1>React interview guide</h1></main>

Intermediate: responsive CSS

02 / INTERMEDIATE

Use a fluid layout rather than fixed desktop widths.

CSS / EXAMPLE

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.card { min-width: 0; }

Real scenario: accessible search form

03 / REAL SCENARIO

Connect the visible label and the input; communicate updated results.

HTML / EXAMPLE

<form role="search">
  <label for="search">Search questions</label>
  <input id="search" type="search" autocomplete="off" />
</form>
<p role="status" aria-live="polite">24 matching articles</p>

02Check your understanding

Try it in your own words.

Explain when should you lazy-load images without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse HTML & CSS study guides ↗

← Back to question library