Using responsive layout

Responsive design is built directly into AMP, and is one of the most useful layouts offered by the layout attribute. We saw how to use amp-img with the responsive layout in our news article example from the last chapter:

<amp-img
  src="img/feature.jpg"  
  width="768"
  height="305"
  layout="responsive" >
</amp-img>

Note that even though we are using the responsive layout, we still need to specify the width and height attributes. Shouldn't it just grow and shrink to fit the viewport? There are two reasons why the width and height attributes are needed:

1. To calculate the aspect ratio of the image so that it is displayed correctly as it is resized.
2. To calculate the page layout before anything is downloaded; this is required by AMP's static layout system.

Our example from the last chapter was a nice first attempt at a news article page, but there's a problem with it. It's not optimized for larger screens. When viewed on a larger screen, the main feature image becomes blocky and pixelated.

Why does this matter--isn't AMP just for small screens? Doesn't the M in AMP stand for Mobile? Well, no and yes (respectively), but it's more nuanced than this. Even in a mobile format, there is a multitude of different device screen sizes that must be accommodated; our AMP pages should look good on all of them. And there is also the idea of Canonical AMP pages: an approach to web publishing where AMP is used exclusively to build a website, for desktop and mobile. In both theses cases, responsive design helps to deal with the wide variety of viewport sizes that must be handled.