In the last chapter we briefly saw how to fix validation errors with amp-img
by adding layout="responsive"
to the image element, but there wasn't much explanation about what was happening. When we added the layout
attribute, we were tapping into AMP's powerful layout system.
AMP's layout system is key to reducing rendering and scrolling-jank. AMP uses a static layout system that relies on a set of attributes to define the layout and sizing of elements. These are layout
, width
, height
, sizes
, and heights
. With these attributes, AMP is able to efficiently calculate the layout and size of each element even before anything is fetched from the network.