Mastering CSS

Simplifying the srcset attribute

Let's take a look at the code a little bit more to simplify the srcset attribute:

<img src="images/jaws.jpg" srcset="images/jaws.jpg 1x, images/[e-mail] 2x" alt="Jaws movie">

We need to keep the original src there as a fallback for browsers that don't support srcset. We'll talk about how awesomely good browser support is later in the section, but it's important to keep in mind that the src attribute is there so that unsupported browsers aren't left out in the lurch.

The one other thing to note is that we can simplify this code equation. The W3C spec mentions that for new user agents, the src attribute participates in the resource selection as if it were specified in the srcset with a 1x descriptor. Since ...