The HTML <picture> element is a container used to specify multiple <source>s for a specific <img> contained in it. The browser will choose the most suitable source according to the current layout of the page.
The choice is between media attribute and type attribute. I find the first one easier for the type of projects I have been working on recently.
Here a quick example:
<picture>
<source srcset=”/images/path.jpg” media=”(min-width: 767px)” class=”img-responsive”
<source srcset=”/images/path.jpg” class=”img-responsive”
<img src=”/images/path.jpg” class=”img-responsive” alt=”Fallback image”>
</picture>
This solution is great mainly for three reasons:
1. Full control of design: make sure they will always fit the screen nicely.
2. Reserve bandwidth on mobile devices, especially if previous solution was to load two images and show one or the other at different screen sizes.
3. Enhance the potential of img { max-width: 100%; height: auto }.
