CHAPTER 5 Robust, Responsible, Responsive Web Design
for the layout they’re seeing. Image resolution, on the other hand, is a
different story: if I’m on a Retina MacBook but I’m tethered to a shaky 3G
connection, I’d likely prefer to opt out of huge high-resolution images.
Unlike media queries, the srcset attribute is documented as a set of
suggestions. When making asset decisions based on a user’s screen size or
pixel density via media queries, we can ensure that we’re never serving a
larger asset than stands to benefit the user. What we can’t do is use that
information to make assumptions about bandwidth conditions or user
preference.
By acting as a suggestion, srcset would allow browsers to introduce
user settings like “always give me high-res images,” “always give me
low-res images,” or “give me high-res images as bandwidth permits.” The
browser has that bandwidth information at hand, and that’s where the
decision should be made — not for the user, but with them.
In the following snippet, we still rely on media attributes to choose the
appropriate source element. It makes sense — we’d decide our breakpoints
based on a combination of factors: our layout’s media queries; the weight
of the images; and alternate cropping and zooming so we can better
represent the focus of the image on a smaller display.<picture>
<source media="(min-width: 40em)" src="big.jpg">
<source src="small.jpg">
<img src="fallback.jpg" alt="...">
</picture>After we’ve established the source element, we then present the
resolution options. This is where we use a portion of the WHATWG’s
proposed srcset attribute to determine which resolution source is most
appropriate.