When not to lazy load?

Skip lazy on LCP hero image. Use fetchpriority=high instead.

Browser may download too large a file. Match real CSS layout width.

Yes. List type per file; browser picks first supported.

Responsive Images & Lazy Loading

Browser chooses appropriate file.

Img

Resize viewport in devtools to test.

<img
  src="fallback.jpg"
  srcset="small.jpg 400w, large.jpg 800w"
  sizes="(max-width: 600px) 100vw, 400px"
  alt="..."
>

Defers network until near viewport.

Lazy

Check Network panel when scrolling.

<img src="photo.jpg" alt="..." loading="lazy" decoding="async">

Different crops per breakpoint.

Note

Use <picture> with media on <source> for crop swaps.

WebP sources with JPEG fallback.

<picture>
  <source media="(min-width: 48rem)" srcset="wide.webp">
  <img src="narrow.jpg" alt="">
</picture>

When not to lazy load?: Skip lazy on LCP hero image. Use fetchpriority=high instead.
sizes wrong symptom?: Browser may download too large a file. Match real CSS layout width.
WebP in srcset?: Yes. List type per file; browser picks first supported.