Source sets for responsive and retina display images

This is a very cool trick that I learnt recently building a WordPress template.

It’s called a “source set” and it allows you to define a set of images, rather than just one. You can define which screen widths trigger each image to be displayed. Media queries. The example below breaks at width = 600px, 1200px and 2000px.

<img src="Logo-banner-open-mobile.png" alt=""

srcset="Logo-banner-open-mobile.png 600w,
Logo-banner-open.png 1200w,
Logo-banner-open-retina.png 2000w" width="600px" />