Responsive Images Guide: srcset, sizes Attributes
Responsive images adapt to different screen sizes, improving website performance and user experience. Here's what you need to know:
<img src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
1100px"
alt="A responsive image">
This code:
- Uses
small.jpg
for screens up to 320px wide - Uses
medium.jpg
for screens 321px to 640px wide - Uses
large.jpg
for larger screens
Key benefits:
- Faster load times
- Less bandwidth usage
- Better user experience across devices
Browser support is high, with a 92/100 compatibility score across modern browsers.
Related video from YouTube
What Are Responsive Images?
Responsive images change based on the device viewing them. They fit different screen sizes, load faster on mobile devices, and use less data on slower networks.
Here's why it matters:
A 5144×1698 pixel, 398KB image looks great on desktop. But on a 320×240 pixel phone screen? It's slow and wastes data.
Responsive images solve this by serving different sized images to different devices.
<img src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
1100px"
alt="A responsive image">
This tells browsers which image to use based on screen size.
Images make up 64% of a webpage's weight on average. Responsive images cut this down for mobile users, speeding up your site.
Sometimes, you might show different images on different devices. This "art direction" could mean a wide landscape on desktop, but a cropped portrait on mobile.
The goal? Serve the right image to the right device. Better experience, better performance.
How srcset Works
The srcset
attribute lets you provide multiple image versions for different screen sizes and pixel densities.
Basic example:
<img src="small.jpg"
srcset="small.jpg 1x, large.jpg 2x"
alt="A rad wolf" />
Here, small.jpg
loads on standard screens, large.jpg
on high-resolution screens.
For more complex scenarios, use width descriptors:
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
alt="A rad wolf" />
The browser chooses based on viewport width and device pixel ratio.
srcset
supports two descriptor types:
Descriptor | Usage | Example |
---|---|---|
Width (w) | Image width in pixels | image.jpg 320w |
Pixel density (x) | Screen density | image.jpg 2x |
Width descriptors are more flexible and work well with sizes
. Pixel density descriptors are simpler but less flexible.
Understanding sizes
The sizes
attribute works with srcset
to help browsers choose the right image. It tells the browser how wide the image will be when displayed.
Basic structure:
<img src="default.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, 33vw"
alt="Responsive image" />
This means:
- 100% viewport width on screens up to 30em wide
- 50% viewport width between 30em and 50em
- 33% viewport width above 50em
Media conditions help fine-tune image selection:
Screen Size | Image Width | Description |
---|---|---|
< 30em | 100vw | Full width on small screens |
30em - 50em | 50vw | Half width on medium screens |
> 50em | 33vw | One-third width on large screens |
Always include a default size at the end of sizes
. Use vw
units for more flexible designs.
sbb-itb-b5a6996
Using srcset and sizes Together
Combining srcset
and sizes
creates a powerful tool for responsive image loading:
<img src="default.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, 33vw"
alt="Responsive image" />
Tips for best results:
- Start with the largest breakpoint in
sizes
- Use viewport width units
- Include a fallback
src
- Specify image widths in
srcset
- Optimize for mobile
Advanced example:
<img src="//placehold.it/700x370" alt="Alt text"
srcset="//placehold.it/1200x634 1200w, //placehold.it/700x370 700w, //placehold.it/340x180 340w"
sizes="(min-width: 1200px) 740px, (min-width: 768px) 700px, calc(100vw - 36px)">
This adapts image size based on different screen widths.
Browser Support
srcset
and sizes
have strong cross-browser support (92/100 compatibility score). Most modern browsers support these attributes well.
For older browsers, use fallback options:
- Include a default
src
attribute - Use JavaScript polyfills
- Implement feature detection
- Apply progressive enhancement
- Consider server-side solutions
Common Mistakes to Avoid
- Overloading
srcset
with unnecessary sizes - Forgetting the
sizes
attribute - Using multiple
<img>
elements for different sizes - Loading larger images on mobile
- Ignoring device pixel ratio
- Neglecting performance optimization
How to Test Responsive Images
Use these methods to test your responsive images:
- Browser developer tools
- Online testing tools like Responsinator
- Image optimization tools like Squoosh
- Practical testing approach with placeholder images
- Automated testing with Puppeteer or Selenium WebDriver
Other Responsive Image Techniques
The <picture>
element offers more control over image presentation:
<picture>
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="A responsive image">
</picture>
This allows for art direction and serving different image formats based on browser support.