Source Sets

This is just some thoughts and general stuff on using the picture element, which is a way of letting a given browser decide from a set of images, based on pixel size and breakpoints, which is the appropriate image to request from the server.

The image below currently two images, with two breakpoints, with a fallback img element. The larger image is 640px wide, the medium and the fallback at 320px. With a larger browser window (I used 40em as the minimum width), the bigger image gets served. If the browser is resized to a smaller width, the smaller image will appear.

milo in the snow