<img srcset sizes>

<img src="img-500.jpg" srcset="img-250.jpg 250w, img-500.jpg 500w, img-1000.jpg 1000w" sizes="(min-width: 700px) 700px, 100vw">

<!--
Great for responsive images; let the browser choose the best image to download __before__ it downloads it by giving it some hints on how big each image actually is AND what size it will be rendered in the final page. With this information the browser will load the smallest image it needs to fulfil the image size requirements.

In the above example, we provide the `src` attribute for old browsers that don't support `srcset` and then for those that do we give a choice of images and their actual widths (in pixels).

In the `sizes` attribute we tell the browser that all images will be rendered the full width of the viewport (100vw, the default) except when the viewport size is >= 700px in which case we're going to use CSS (somewhere) to limit the size of the image to 700px. Then the browser knows that it doesn't need to download, say, a 1000px-wide image on a 1200px wide screen (assuming 1x pixel density) because the image will be clamped to 700px wide anyway.

It is important therefore that any CSS matches the markup otherwise the wrong image could end up being chosen.

source: <http://ericportis.com/posts/2014/srcset-sizes/>
-->