Mastering SVG

The srcset and sizes attributes

To solve more complicated use cases, the srcset attribute can work in tandem with the new sizes attribute to use media queries to serve separate image sources, displayed with different relative dimensions based on the browser window. The code sample illustrates how this works. 

In this example, the element starts with an src attribute for non-supporting browsers. In this case, I've chosen a smallish image to ensure that it loads speedily, no matter what device or browser. Following that there's the new sizes attribute. sizes accepts a media query/image size pair (or list of pairs).

The following diagram breaks down the components. The first part is the media query. This media query should be familiar if you've ...