Responsive Images
📌 Covered in this chapter:
Responsive Images · srcset Width Descriptors · sizes Attribute · <picture> & <source> Tags · Art Direction · AVIF/WebP Format Fallbacks
Welcome to Phase 5 (Chapter 12): Responsive Images! Serving a massive 4K image file to a small mobile phone wastes cellular data and slows page loads. In this chapter, we master
srcset width descriptors, the sizes layout hint, the HTML5 <picture> element, Art Direction, and modern WebP/AVIF media type fallbacks.
1Resolution Switching with srcset & sizes
HTML — srcset & sizes Syntax
▶ Run in HTML Editor
<img
src="banner-800.jpg"
srcset="banner-400.jpg 400w, banner-800.jpg 800w, banner-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive Banner">2Art Direction & Modern Format Fallbacks (<picture>)
HTML — Picture Element with AVIF/WebP
▶ Run in HTML Editor
<picture>
<!-- Serve next-gen AVIF if supported -->
<source srcset="hero.avif" type="image/avif">
<!-- Serve WebP as fallback -->
<source srcset="hero.webp" type="image/webp">
<!-- Default JPG image fallback -->
<img src="hero.jpg" alt="Hero Banner" width="800" height="400">
</picture>❓ Frequently Asked Questions (FAQ)
Q1: When should I use <picture> vs srcset?
Use srcset when serving identical images at different resolutions. Use <picture> when changing image cropping (Art Direction) or offering next-gen format fallbacks (AVIF/WebP).