I’ve simplified their markup slightly, but the structure’s the same. A picture element contains any number of source elements, and exactly one img. On each source, there’s a media query inside the media attribute. The browser loops through each of the source elements until it finds one whose media query matches the conditions in the browser. Upon finding a match, it will send that source’s srcset to the img element and load it.
That relationship between the source and the img is actually quite important: the matching source is never rendered by the browser. In fact, neither is the picture element: the srcset of the relevant source element is sent to the innermost img, and that’s what gets displayed. So on widescreen displays, the source with (min-width: 990px) will send the largest version of the photo to the img; on midsize breakpoints, [email protected] will get rendered, thanks to the (min-width: 750px) query. And finally, if none of the media queries match, the browser will just load the img.
Instead of using srcset and sizes to load bigger and smaller versions of the same image, picture allows us to tailor our image content to fit specific viewports. In the language of the responsive images specification, this is referred to as art direction. Rather than simply resizing the image, we’re cropping or otherwise optimizing it to fit a specific breakpoint. In doing so, we’re ensuring that it still conveys its meaning, even though the details inside the image may change.
This type-based switching allows us to use the picture element to ask a browser which file formats it supports. And it gets considerably more powerful when coupled with media queries, as you’ll see if you look at the logo at the top of the Responsive Web Design site (http://responsivewebdesign.com/workshop).
Here we’re combining media queries on each source with a type attribute, allowing us to query not just the width of the viewport, but whether or not the browser also supports SVG (type="image/svg+xml"). And we’re doing so at multiple breakpoints. At the widest ((min-width: 50em)) and smallest ends of the masthead’s layout, we’re looking to load a two-line version of the image, either as a SVG (logo-rwd.svg) or PNG (logo-rwd.svg). But at the middle breakpoint ((min-width: 39em)), the wordmark’s laid out in a single line; and once again, we’re using type-based switching to test for SVG support.
All that extra code might look complex, but the process is still the same: our browser is going to start at the top of our sources, and work its way down, searching for a source whose media query matches the viewport and whose type attribute matches the image formats supported by the browser. Once it finds a match, it’ll send that srcset to the img to be rendered; if there aren’t any matches, then it’ll just load our img.