Skip to main content

React srcset for Responsive Images

If you ever read about the srcset attribute on images, but never got around to implementing it, keep on reading. Your users with their limited phone data packages will love you!

Why Do We Care About srcset?

Images are essential on the web and, together with videos, they make up for the most bytes downloaded on most websites. To illustrate: here is how much of the downloaded bytes are images for a few popular sites 42% 27% 95% 65% 38%

So, since you also most likely have a lot of images on your site, two important questions need to be answered:

  • How do I ensure high-quality images for my users?
  • How do I ensure that they don’t download unnecessary big images?

You cannot just serve huge images to everyone, it will affect the performance for users on a medium/slow connection. Those users will most likely have significantly spent less time on your page, and the conversion rate will be lower if you are running an ecommerce. What’s the solution?


Historically there have been many attempts to solve this. Most of these attempts have been with Javascript. Which correct image is to be served is determined by checking the device screen width along with the device pixel ratio after the page is loaded. This approach allows you to make a fair assumption on which image to serve. There are however two major problems with this:

  • The calculation happens after the page is loaded. What would you show before that?
  • What happens when the browser landscape changes and your algorithm is out of date? And how do you know when it is out of date?

Srcset to the Rescue

A while ago, the srcset attribute was introduced on <img> tags. This is a powerful attribute that enables the browser to determine which image to serve the user! No javascript, no waiting for the page to load!

It can be implemented in React in like so:

const small = '300.jpg';
const medium = '768.jpg';
const large = '1280.jpg';

function ResponsiveImage () {
  return (
    <img src={small} srcSet={`${small} 300w, ${medium} 768w, ${large} 1280w`} />

Our whole site is implemented with this, but if you want to try for yourself have a look at this pen:


Srcset has gained incredible support in the browser landscape, and there is no reason not to use it today! If you want even more fine-grained control, check out the sizes attribute and the source element!