Image Art Direction
Responsive Images gives us some great media capabilities, while I really like srcset & sizes for helping with media loading optimisation - it is the Picture element and it's power to enable us to be more expressive with our media that I am most excited.
Media Art Direction: In this example I am using media queries to change the visual payload to make it more appropriate for the available screen area:
..
The code behind this example, provides both image candidates for higher DPR and variable width viewports, but also requests different media sources, each being better attuned for the available viewport space.
<picture>
<source media="(max-width: 500px)"
srcset="https://responsiveimag.es/images/Apples-slices.jpg,
https://responsiveimag.es/images/Apples-slices-2x.jpg 2x" />
<source media="(max-width: 780px)"
srcset="https://responsiveimag.es/images/Apples-crop-500.jpg 500w,
https://responsiveimag.es/images/Apples-crop-600.jpg 600w,
https://responsiveimag.es/images/Apples-crop-800.jpg 800w" />
<source srcset="https://responsiveimag.es/images/Apples-800.jpg 800w,
https://responsiveimag.es/images/Apples-1000.jpg 1000w,
https://responsiveimag.es/images/Apples-1800.jpg 1800w"/>
<img src="https://responsiveimag.es/images/Apples-fallback.jpg" alt="How do you like them Apples?" />
</picture>Using Dynamic Media tools such as Cloudinary, can also provide object-aware smart cropping to help automatic and scale this approach.