We use the picture (specifies the number of image options) and source (specifies alternate image sources) elements for achieving art-direction-based selection:
<picture>
<source media="(min-width: 1024px)" srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
<source media="(min-width: 760px)" srcset="logo-480.png, logo-480-2x.png 2x">
<img src="logo-320.png" alt="logo">
</picture>Each source element contains a media and a srcset attribute (and a sizes attribute as well). The media attribute supplies a media query for checking the current browsing conditions.
The art-direction-based selection should be used when we want to crop an image in order to enhance a specific part of it, displaying it in more detail. This type of selection should also be used to provide different images more suitable to the layout of the device (vertical, horizontal).
The img element acts as a "placeholder" for the other images and it is also the fallback image in case the other images fail to be understood by the browser.
- Another explanation: https://dev.opera.com/articles/responsive-images/
- Another explanation + tutorial: https://www.youtube.com/watch?v=Rik3gHT24AM
- Another tutorial: https://cloudfour.com/thinks/responsive-images-101-definitions/