/* Basic picture element example for three versions on an image */

<picture>
   <source media="(min-width: 1200px)" srcset="images/snow-large.jpg">
   <source media="(min-width: 700px)" srcset="images/snow-medium.jpg">
   <img src="images/snow-small.jpg" alt="Snow forever">
</picture>


/* More complicated version with support for different resolutions */

<picture>
   <source media="(min-width: 1200px)" srcset="images/snow-large.jpg 1x, images/snow-large@2x.jpg 2x">
   <source media="(min-width: 700px)" srcset="images/snow-medium.jpg 1x, images/snow-medium@2x.jpg 2x">
   <source media="(max-width: 699px)" srcset="images/snow-small.jpg 1x, images/snow-small@2x.jpg 2x">
   <img src="images/snow-small.jpg" alt="Snow forever">
</picture>