Mastering CSS

Using the W descriptor and sizes attribute of the srcset attribute

Note that the srcset attribute is not a one-trick pony; we have talked about how it works for handling retina images easily. But there is another use case of the srcset attribute that uses the W descriptor and the sizes attribute:

<img src="images/medium.png"    srcset="images/big.png 1600w,            images/small.png 600w"    sizes="(min-width: 1000px) 1600px,            600px" />

It allows you to handle the serving of different images based on the width of the browser. A gigantic, hero, full-page image looks beautiful on a desktop, but would be bad for performance, if you just shrink it down and serve it on much smaller mobile devices, since small devices don't need a super large image.

The w descriptor ...