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.

How to apply AMP Template to Blogger?

This is a step by step guide on how to apply AMP based template your blog. We make use of the custom template feature in blogger for this purpose.

1.  Download our AMP template from the GitHub repo.
2. Go to blogger.com dashboard.
3. Click on the theme option in the sidebar.

What are the advantages of AMP?

Basically AMP(Accelerated Mobile Pages) is a website publishing technology that improves the loading time of the site. It allows the site to load faster on mobile. Some of the advantages of AMP are discussed here

Speed
AMP pages are definitely way faster than normal ones. As Wikipedia says here,

Google reports that AMP pages served in Google search typically load in less than one second and use 10 times less data than the equivalent non-AMP pages.^[1] CNBC reported a 75% decrease in mobile page load time for AMP Pages over non-AMP pages,^[2] while Gizmodo reported that AMP pages loaded three times faster than non-AMP pages.

Responsiveness
AMP based websites are responsive in nature like this blog. That is my main reason that I tried it. Not just the website but also things like images become responsive too.

Improved User experience
A website that is faster to load and scales to a mobile screen is a big win for the end user. It definitely provides a improved user experience.

Reduced load on servers
AMP pages are usually served from Google cache for faster load times. This in turn will reduce the load on your servers.