How to Add Responsive Image in AMP HTML

Post Tags

AMP Tutorial

Share This

• 

Pretty posts

By Rubel

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

• 

Codiblog

Codiblog is a blog that's dedicated to bringing you high quality blogging tutorial and resources on different blogging categories. It's main forus on user experience. Subscribe and Follow with @ Rss | Twitter | Facebook | Google+