Using responsive images and srcset to deliver high quality images on all screen sizes

To achieve the second goal, we can use layout="responsive" again, so that the thumbnails will scale for larger screens. The HTML for each item in the list now looks like this:

<li>
  <figure class="related-thumb">
    <amp-img src="img/penguin.jpg" width="125" height="75" layout="responsive"></amp-img>
    <figcaption>
      If a penguin can find a soul mate, I'm sure I can too
      <span class="author">Rebekah Crane</span>
    </figcaption>
  </figure>
</li>

There is a problem with this solution, however. It's the same problem that we had earlier when our main feature image was scaled up on large screens: it became pixelated. The same thing will happen with our thumbnails. Thankfully, we can apply the same solution as before using srcset:

<amp-img src="penguin.jpg" 
         srcset="img/penguin-sm.jpg 125w,
                 img/penguin.jpg 640w"
         width="125" 
         height="75" 
         layout="responsive"
</amp-img>

Now, on larger screens, the browser will automatically use the higher resolution image.