Responsive images adapt to different screen sizes and resolutions, ensuring users get the optimal image for their device. This improves performance, saves bandwidth, and provides better user experiences across all devices.
The Problem with Fixed Images
Using a single large image for all devices creates problems:
- Mobile users: Download huge images on slow connections
- Wasted bandwidth: Serving 2000px images to 400px screens
- Poor performance: Slow page loads hurt user experience
- High-resolution displays: Need higher quality images
problem.html
<!-- ❌ Not responsive - same huge image for all devices -->
<img src="large-photo-2000px.jpg" alt="Product photo" width="2000" height="1500">The Srcset Attribute
The srcset attribute lets you provide multiple image sources and let the browser choose the best one based on the device's screen size and pixel density.
Resolution Switching
Use the x descriptor to provide different resolutions for different pixel densities:
srcset-resolution.html
<img src="photo.jpg"
srcset="photo.jpg 1x,
photo-2x.jpg 2x,
photo-3x.jpg 3x"
alt="Product photo"
width="800"
height="600">
<!--
1x = standard displays
2x = retina/high-DPI displays
3x = very high-DPI displays
-->Width Descriptors
Use the w descriptor to specify image widths, letting the browser choose based on viewport size:
srcset-width.html
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w"
alt="Landscape photo"
width="800"
height="600">
<!--
400w = image is 400 pixels wide
800w = image is 800 pixels wide
1200w = image is 1200 pixels wide
1600w = image is 1600 pixels wide
-->The Sizes Attribute
The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes. This helps the browser choose the right image from srcset.
sizes.html
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w,
photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Photo"
width="800"
height="600">
<!--
Translation:
- On screens up to 600px: image takes 100% of viewport width
- On screens up to 1200px: image takes 50% of viewport width
- On larger screens: image is 800px wide
-->Understanding Sizes Syntax
sizes-explained.html
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 800px"
│ │ │ │ │
│ │ │ │ └─ Default width
│ │ │ └─ Image width when condition is true
│ │ └─ Second condition
│ └─ Image width when condition is true
└─ First condition (media query)The Picture Element
The <picture> element provides more control, letting you serve completely different images based on conditions like viewport size, resolution, or image format support.
Basic Picture Usage
picture-basic.html
<picture>
<source media="(max-width: 600px)" srcset="mobile.jpg">
<source media="(max-width: 1200px)" srcset="tablet.jpg">
<img src="desktop.jpg" alt="Responsive image" width="1200" height="800">
</picture>
<!--
Mobile screens: mobile.jpg
Tablet screens: tablet.jpg
Desktop screens: desktop.jpg (fallback)
-->Art Direction
Use picture to show cropped or different versions of images on different screen sizes (not just scaled versions):
art-direction.html
<picture>
<!-- Mobile: Portrait crop showing face -->
<source media="(max-width: 600px)" srcset="portrait-mobile.jpg">
<!-- Tablet: Square crop -->
<source media="(max-width: 1200px)" srcset="square-tablet.jpg">
<!-- Desktop: Full landscape image -->
<img src="landscape-desktop.jpg"
alt="Team photo"
width="1600"
height="900">
</picture>Format Fallbacks
Serve modern formats like WebP with fallbacks for older browsers:
format-fallback.html
<picture>
<!-- Try WebP first (smaller file size) -->
<source srcset="photo.webp" type="image/webp">
<!-- Fall back to JPG if WebP not supported -->
<img src="photo.jpg" alt="Photo" width="800" height="600">
</picture>Combining Multiple Techniques
combined.html
<picture>
<!-- WebP for mobile -->
<source media="(max-width: 600px)"
srcset="mobile-400.webp 400w,
mobile-800.webp 800w"
sizes="100vw"
type="image/webp">
<!-- JPG fallback for mobile -->
<source media="(max-width: 600px)"
srcset="mobile-400.jpg 400w,
mobile-800.jpg 800w"
sizes="100vw">
<!-- WebP for desktop -->
<source srcset="desktop-1200.webp 1200w,
desktop-1600.webp 1600w"
sizes="(max-width: 1200px) 100vw, 1200px"
type="image/webp">
<!-- JPG fallback for desktop -->
<img src="desktop-1200.jpg"
srcset="desktop-1200.jpg 1200w,
desktop-1600.jpg 1600w"
sizes="(max-width: 1200px) 100vw, 1200px"
alt="Product showcase"
width="1200"
height="800">
</picture>Practical Examples
Blog Featured Image
blog-featured.html
<figure>
<picture>
<source media="(max-width: 600px)"
srcset="featured-mobile-400.jpg 400w,
featured-mobile-800.jpg 800w"
sizes="100vw">
<source media="(max-width: 1200px)"
srcset="featured-tablet-800.jpg 800w,
featured-tablet-1200.jpg 1200w"
sizes="100vw">
<img src="featured-desktop-1600.jpg"
srcset="featured-desktop-1600.jpg 1600w,
featured-desktop-2000.jpg 2000w"
sizes="(max-width: 1400px) 100vw, 1400px"
alt="Article featured image"
width="1600"
height="900"
loading="eager">
</picture>
<figcaption>Photo by Jane Smith</figcaption>
</figure>Hero Banner
hero-banner.html
<header>
<picture>
<!-- Mobile: Vertical banner -->
<source media="(max-width: 768px)"
srcset="hero-mobile-600.jpg 600w,
hero-mobile-1200.jpg 1200w"
sizes="100vw">
<!-- Desktop: Wide banner -->
<img src="hero-desktop-1920.jpg"
srcset="hero-desktop-1920.jpg 1920w,
hero-desktop-2560.jpg 2560w"
sizes="100vw"
alt="Welcome to our website"
width="1920"
height="600"
loading="eager">
</picture>
</header>Product Gallery
product-gallery.html
<section class="product-gallery">
<figure>
<picture>
<source srcset="product-main.webp" type="image/webp">
<img src="product-main.jpg"
srcset="product-main-400.jpg 400w,
product-main-800.jpg 800w,
product-main-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
alt="Blue ceramic coffee mug"
width="800"
height="800"
loading="lazy">
</picture>
<figcaption>Available in Ocean Blue</figcaption>
</figure>
</section>Best Practices
✅ Do:
- Always include a src attribute as fallback
- Provide at least 3-4 different image sizes
- Use WebP with JPG/PNG fallbacks for best compression
- Include width and height attributes to prevent layout shift
- Test on real devices with various screen sizes
- Use picture for art direction (different crops)
- Use srcset + sizes for simple resolution switching
- Optimize all image versions before uploading
❌ Don't:
- Use srcset without sizes when using width descriptors
- Provide too many image variations (diminishing returns)
- Forget the fallback img element in picture
- Use picture when simple srcset would work
- Ignore image optimization (compress all versions!)
- Test only in browser DevTools (test real devices)
When to Use Each Approach
📱 Use srcset with x descriptors when:
- Image size is fixed (doesn't change with viewport)
- You want to serve high-res images to retina displays
- Simple resolution switching is sufficient
📐 Use srcset with w descriptors + sizes when:
- Image size changes with viewport size
- You want browser to choose optimal image
- Same image, just different resolutions
🎨 Use picture element when:
- You need different crops for different screen sizes
- Providing format fallbacks (WebP → JPG)
- Art direction is needed (different images, not just scaled)
- Complex responsive image requirements
Browser Support
Responsive image features are well-supported in all modern browsers:
- srcset: Supported in all modern browsers
- sizes: Supported in all modern browsers
- picture: Supported in all modern browsers
- Fallback: Older browsers use the src/img fallback
Testing Responsive Images
💡 Testing Tips:
- Use browser DevTools to simulate different devices
- Check Network tab to see which images are downloaded
- Test on actual mobile devices when possible
- Use Lighthouse to check image optimization
- Verify layout shift doesn't occur during image loading
- Test with slow network speeds (throttling)
Key Takeaways
srcsetprovides multiple image sources for the browser to choose fromsizestells the browser how wide the image will be displayed<picture>element offers more control for complex scenarios- Use x descriptors (1x, 2x) for fixed-size images
- Use w descriptors (400w, 800w) with sizes for flexible images
- Picture element is ideal for art direction and format fallbacks
- Always include fallback src for older browsers
- Responsive images dramatically improve performance
What's Next?
Now that you understand responsive images, you're ready to learn about audio elements. In the next lesson, we'll explore how to add audio content to your web pages using the HTML5 audio element.