amp-img tag for a responsive layout

Question

I am using amp (Accelerated Mobile Pages Project) technology in a new project. My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.

Likewise, the documentation says that the image will take the space of its parent container.

I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.

Thank you in advance for your answers

Answer 1

The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.

Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.

The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.

In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.

For more information about Restricting width of responsive images Click Here