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.
w unit is always meant to be used with the
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
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.
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.