<figure class="banner">
<picture>
<source media="(min-width: 960px)" srcset="https://www.greenhilldigital.com/console/resources/ourstudiowide-w2200.jpg">
<source media="(min-width: 768px)" srcset="https://www.greenhilldigital.com/console/resources/ourstudiomedium-w960.jpg, https://www.greenhilldigital.com/console/resources/ourstudiomedium-w1920.jpg 2x">
<source media="(min-width: 375px)" srcset="https://www.greenhilldigital.com/console/resources/ourstudionarrow-w480.jpg, https://www.greenhilldigital.com/console/resources/ourstudionarrow-w960.jpg 2x">
<img srcset="https://www.greenhilldigital.com/console/resources/ourstudionarrow-w320.jpg, https://www.greenhilldigital.com/console/resources/ourstudionarrow-w640.jpg 2x" alt="Team">
</picture>
<figcaption>Greenhill team assembled outside our Glasgow studio</figcaption>
</figure>
<figure class="banner">
<picture>
<source media="(min-width: 960px)"
srcset="https://www.greenhilldigital.com/console/resources/ourstudiowide-w2200.jpg">
<source media="(min-width: 768px)"
srcset="https://www.greenhilldigital.com/console/resources/ourstudiomedium-w960.jpg, https://www.greenhilldigital.com/console/resources/ourstudiomedium-w1920.jpg 2x">
<source media="(min-width: 375px)"
srcset="https://www.greenhilldigital.com/console/resources/ourstudionarrow-w480.jpg, https://www.greenhilldigital.com/console/resources/ourstudionarrow-w960.jpg 2x">
<img srcset="https://www.greenhilldigital.com/console/resources/ourstudionarrow-w320.jpg, https://www.greenhilldigital.com/console/resources/ourstudionarrow-w640.jpg 2x"
alt="Team">
</picture>
<figcaption>Greenhill team assembled outside our Glasgow studio</figcaption>
</figure>
/* No context defined for this component. */
This meets the “the art direction use case” so we use the <picture> element.
Using a <picture>-based approach allows us to issue the browser with a series of “directives” rather than “suggestions”.
We previously had a problem when employing resolution switching rather than <picture>. 3x DPR retina phones (e.g. iPhone 8 plus) didn’t select the desired 4:3 image but instead picked a larger 16:9 image which wasn’t right for our mobile layout.
Our new approach ensures that the right image is sent to the right screen size, rather than letting the browser decide. It avoids devices selecting an unsuitable large image just because they can handle the density.
For the CMS you need three source images: Narrow, Medium-Wide and Wide.
Because we use three different source images (rather than just one source image) there is the opportunity for these images to be different, to a greater or lesser extent.
Narrow: a 960x720 (4:3) or larger image.
Medium-Wide: a 1920x540 (16:9 but half the height) or larger image.
Wide: a 2200x619 (16:9 but half the height) or larger image.