AMP: Building Accelerated Mobile Pages

Using the heights and sizes attributes

The heights and sizes attributes allow us to further tweak the display of our responsive images. The sizes attribute lets us use a media query to define how wide an image should be displayed, depending on the size of the user's viewport. Take the following code, for example:

sizes="(min-width: 640px) 50vw, 100vw"

This means that for screen sizes of 640 pixels and wider (min-width: 640px), the image should take up 50 percent of the viewport width (50vw). For all other screen sizes--that is--those less than 640 pixels, display the image at 100 percent of the viewport width: (100vw).

The heights attribute achieves a similar effect, but unlike sizes, it applies to the height of the image instead of the width, ...