🎁 Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

Responsive images – when to use x or w units in the img srcset

There are two ways we can express the srcset attribute. Both do the same thing: responsive images - serving the appropriate image with the appropriate resolution for the user device. However, they do it in different ways.

1. Using the x - pixel density descriptor in srcset

<img srcset="
    cat-big.jpg 3x,
    cat-medium.jpg 2x,
    cat-small.jpg 1x" >

This will tell the browser to use the cat-big.jpg when our device has a 3x pixel density display, the cat-medium.jpg when the device has a 2x display, and so on. If you don’t know the pixel density of a device you can check it on mydevice.io.

Know that the x will only care about the pixel density of the screen. If your screen is a 3x it will still serve the big.jpg even if the img is just 2% of the screen.

2. Using the w - width descriptor in srcset

β€œ<img srcset="cat-small.jpg 600w, 
       cat-medium.jpg 1000w, 
       cat-big.jpg 1500w" 
    sizes="25vw" >”

In the above code we say that our img will take 25% of the viewport view. So for example, if our screen is 1000px wide, this means our picture will take 250px and so the cat-small.jpg will be used because it covers the 0-600 range.

The w unit is always meant to be used with the sizes attribute.

A w unit is corresponding to a px unit. Not sure why it was a need for a new unit to describe this.
Also please note that we can have full media queries in the sizes attribute, as you can see here link.

3. When to use x vs w in the srcset attribute?

The pixel density - x is the simpler approach to use. It will make sure your images look sharp and crisp on any screen type. It is the minimum you can do for the responsiveness or your images.

Meanwhile, the w - width descriptor is harder to use but provides better control and performance for your responsive images.

A helpful article to understand all of this was this one.

πŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

πŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *