🖼️ Module 14 · Advanced Elements🟡 IntermediateLESSON 47
Responsive Images
Course progress44%
🎯 What you'll learn: The
<picture> element, srcset/sizes, art direction, the WebP format, and native lazy loading.
Section 1
srcset & sizes — Resolution Switching
srcset gives the browser multiple image files at different resolutions, letting it pick the best one for the device's screen density and viewport — without you writing any JavaScript.
srcset-basic.html
HTML
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Product photo">
💡
w descriptors vs x descriptors
"800w" means "this file is 800px wide" — paired with sizes to tell the browser how much viewport width the image will occupy, so it can calculate which file is sharpest without wasting bandwidth.
Section 2
picture & Art Direction
<picture> goes further than srcset — it lets you serve entirely different crops or images at different breakpoints (art direction), not just different resolutions of the same image.
picture-art-direction.html
HTML
<picture> <source media="(max-width: 600px)" srcset="hero-mobile-crop.jpg"> <source media="(min-width: 601px)" srcset="hero-wide.jpg"> <img src="hero-wide.jpg" alt="Course hero banner"> </picture>
⚠️
The img fallback is required
The <img> inside <picture> isn't optional — it's what actually renders if no source matches, and it's what screen readers and older browsers rely on.
Section 3
WebP & Format Fallback
<picture> can also serve a modern format like WebP to browsers that support it, falling back to JPEG for those that don't — using the type attribute on <source>.
picture-webp.html
HTML
<picture> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="Fallback JPEG"loading="lazy"> </picture>
| Attribute | Purpose |
|---|---|
| srcset | Multiple resolution options for the same image |
| sizes | Tells the browser how wide the image will display |
| <source media> | Art direction — different crops per breakpoint |
| <source type> | Format fallback — e.g., WebP with JPEG backup |
| loading="lazy" | Defers loading offscreen images until needed |
🧩 Knowledge Check — Lesson 47
5 questions to test your understanding.
1. What does srcset let the browser choose between?
2. What is "art direction" in responsive images?
3. Is the img tag inside picture optional?
4. How do you offer a WebP image with a JPEG fallback?
5. What does loading="lazy" do?
Coding Challenge — Lesson 47
Apply what you learned · Intermediate Level
Challenge: Build a Responsive Hero Image
Build a picture element with a WebP source (type="image/webp"), a mobile crop source for max-width: 600px, and an img fallback with loading="lazy" and proper alt text.
Build a picture element with a WebP source (type="image/webp"), a mobile crop source for max-width: 600px, and an img fallback with loading="lazy" and proper alt text.
💡 Show hints if you're stuck
- Order matters — list sources before the fallback img.
Finished this lesson?
Mark it complete to track your progress.
Lesson 47 of 62Module 14 — Advanced Elements