Unicorn Platform

World's best and simplest website builder powered by AI

Build your website
Friday, August 23, 2024

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.

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:

  1. Start with the largest breakpoint in sizes
  2. Use viewport width units
  3. Include a fallback src
  4. Specify image widths in srcset
  5. 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:

  1. Include a default src attribute
  2. Use JavaScript polyfills
  3. Implement feature detection
  4. Apply progressive enhancement
  5. Consider server-side solutions

Common Mistakes to Avoid

  1. Overloading srcset with unnecessary sizes
  2. Forgetting the sizes attribute
  3. Using multiple <img> elements for different sizes
  4. Loading larger images on mobile
  5. Ignoring device pixel ratio
  6. Neglecting performance optimization

How to Test Responsive Images

Use these methods to test your responsive images:

  1. Browser developer tools
  2. Online testing tools like Responsinator
  3. Image optimization tools like Squoosh
  4. Practical testing approach with placeholder images
  5. 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.