scottgruber.me

Layout 38: Outdoor coffee shop mural

Two men love Annie

screenshot

Test case for use of responsive images using picture element, source and srcset. Leaving art direction of images to the browser is unpredictable.

view layout

Code

<picture class="men">
<source srcset="img/038/street-art-2019-04-20-12.39.12@2x.jpg" media="(min-width: 60em)">
<source srcset="img/038/street-art-2019-04-20-12.39.12-bw.jpg" media="(min-width: 48em)">
<img srcset="img/038/street-art-2019-04-20-12.39.12-op@2x.jpg 2x" src="img/038/street-art-2019-04-20-12.39.12-bw.jpg" />
 </picture>

<picture class="woman">
<source srcset="img/038/street-art-2019-04-20-12.39.26@2x.jpg" media="(min-width: 60em)">
<source srcset="img/038/street-art-2019-04-20-12.39.26-pixel.jpg" media="(min-width: 48em)">
<img srcset="img/038/street-art-2019-04-20-12.39.26-pixel@2x.jpg 2x" src="img/038/street-art-2019-04-20-12.39.26-bw.jpg" />
</picture>