6 August 2018

Making images responsive in AMP Blogger Template

The AMP blogger template make the website and text responsive by default. But the images have to be made responsive manually.Yes, you heard that right. You have to manually alter every image to make it responsive.
By default when you insert an image into blogger you get the following code

<img border="0" data-original-height="200" data-original-width="600" height="200" src="" width="600" />

You have the change the code into following. You have to copy paste the image src. Obtain the height from the data-original-height and data-original-width tags.
<amp-img src="" alt="A responsive image" height="200" width="600" layout="responsive"></amp-img>
Do not forget to include the layout="responsive" attribute otherwise the image will not be responsive.

Below is an example image loaded from unsplash. You can resize the screen and see that the image is responsive.