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 ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.