Most websites still ship the same large image to phones, tablets and desktops. In 2026 that is no longer acceptable — or necessary.
This masterclass shows you exactly how to implement truly responsive images that look sharp, load fast, and keep Core Web Vitals happy.
What you will master: correct use of
srcset + sizes, the <picture> element for art direction, modern format delivery (AVIF → WebP → JPEG), and real production patterns that actually work. 1. The Foundation: srcset + sizes
The browser needs two pieces of information:
- Which image files exist and how wide they are (
srcset) - How wide the image will be displayed in the layout (
sizes)
<img
srcset="
hero-800.avif 800w,
hero-1200.avif 1200w,
hero-1600.avif 1600w,
hero-2400.avif 2400w"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
src="hero-1200.jpg"
alt="Descriptive alt text"
width="1200" height="630"
loading="lazy">
srcset="
hero-800.avif 800w,
hero-1200.avif 1200w,
hero-1600.avif 1600w,
hero-2400.avif 2400w"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
src="hero-1200.jpg"
alt="Descriptive alt text"
width="1200" height="630"
loading="lazy">
2. Art Direction with <picture>
When you need different crops or completely different images for mobile vs desktop, use the <picture> element.
<picture>
<source media="(max-width: 767px)" srcset="hero-mobile.avif" type="image/avif">
<source media="(max-width: 767px)" srcset="hero-mobile.webp" type="image/webp">
<source srcset="hero-desktop.avif" type="image/avif">
<source srcset="hero-desktop.webp" type="image/webp">
<img src="https://file-hosting.dashnexpages.net/webp/hero-desktop.jpg" alt="..." width="1600" height="700">
</picture>
<source media="(max-width: 767px)" srcset="hero-mobile.avif" type="image/avif">
<source media="(max-width: 767px)" srcset="hero-mobile.webp" type="image/webp">
<source srcset="hero-desktop.avif" type="image/avif">
<source srcset="hero-desktop.webp" type="image/webp">
<img src="https://file-hosting.dashnexpages.net/webp/hero-desktop.jpg" alt="..." width="1600" height="700">
</picture>
3. Modern Format Stack (2026 Best Practice)
Always offer AVIF first, then WebP, then a solid JPEG fallback.
4. Density Descriptors vs Width Descriptors
Prefer width descriptors (800w) for flexible layouts. Use density descriptors (2x) only for fixed-size icons or logos.
5. Real-World Production Checklist
- Generate 3–4 widths for every important image
- Always include explicit
widthandheight - Never lazy-load the LCP image
- Use
fetchpriority="high"on the hero - Test with Chrome DevTools network throttling
Master these patterns and your images will finally stop being the performance bottleneck.