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