Post Tags

AMP Tutorial

Pretty posts

AMP Responsive Image Tutorial
For your website, making image responsive is important to work with all kind of devices. In AMP, you don't need to set different width and height for different devices. The AMP layout attribute help you making responsive image much easier than if you'd use css alone.

Responsive Image in AMP HTML


Create responsive image by specifying width and height, setting layout to responsive. See below example.
<amp-img src="/img/nature.jpg" width="1054" height="560" layout="responsive" alt="an image"></amp-img>
From above code layout="responsive" attribute make this amp-img element automatically fits the width and height with it's container elements on different devices.

Extra Tips: You must specify image width and height, without it's, you can't verify your amp page by amp validator tools

Resources: https://www.ampproject.org/docs/guides/responsive/control_layout