Adaptive Images
Markup
<ul class="clearfix gallery">
<li style="width:50%">
<img sizes="50vw" alt="..."
srcset="480/sample1.jpg 480w, 960/sample1.jpg 960w">
</li>
<li style="width:50%">
<img sizes="50vw" alt="..."
srcset="480/sample2.jpg 480w, 960/sample2.jpg 960w">
</li>
<li style="width:100%">
<img sizes="(max-width: 40em) 50vw, 100vw" alt="..."
srcset="480/sample3.jpg 480w, 960/sample3.jpg 960w, 1920/sample3.jpg 1920w">
</li>
</ul>
Photos by Ben (CC BY-SA 2.0)