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>