Let the browser pick the right image for the viewport. `srcset` lists candidates by intrinsic width; `sizes` tells the browser how big the image will render. Cuts mobile data dramatically.
HTML
<img
src="/img/hero-1200.jpg"
srcset="
/img/hero-400.jpg 400w,
/img/hero-800.jpg 800w,
/img/hero-1200.jpg 1200w,
/img/hero-1600.jpg 1600w
"
sizes="(min-width: 1024px) 50vw, 100vw"
alt="A team of developers reviewing code on a large monitor."
loading="lazy"
decoding="async"
width="1200" height="600">
<!-- What each attribute does:
srcset — candidates (file Wpx) the browser can choose from
sizes — "how wide will this image render in CSS px?"
The browser combines that with DPR to pick the best srcset entry.
loading — lazy: defer offscreen images until near the viewport
decoding — async: don't block paint while decoding
width/height — reserve layout space (prevents CLS) -->Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.