Art direction with srcset, sizes & heights
srcset attribute to control an element’s assets
based on varying media expressions.
In particular, use it for all
to specify which image assets to use based on varying screen sizes.
In this simple example,
srcset specifies which image to use based on the screen width.
w descriptor tells the browser the width
of each image in the list:
<amp-img src="wide.jpg" srcset="wide.jpg 640w, narrow.jpg 320w"> </amp-img>
Learn more about creating responsive images using
in Using Responsive Images (Now).
You can also use the
sizes attribute along with
sizes attribute describes how to calculate the element size
based on any media expression.
Based on the element’s calculated size,
the user agent selects the most relative source supplied by the
Consider the following example:
<amp-img src="wide.jpg" srcset="wide.jpg 640w, narrow.jpg 320w" sizes="(min-width: 650px) 50vw, 100vw"> </amp-img>
sizes attribute defines the element’s width to be 50% the size of the viewport
when the viewport is 650px or more.
For example, if the viewport is 800px,
the element’s width is set to 400px.
The browser then selects the
srcset resource relative to 400px,
assuming the device pixel ratio is 1,
which in this instance is
Learn more about how
srcset attributes compare
to media queries in this
Srcset and sizes blog post.
All AMP custom elements that allow
responsive layout, also support the
The value of this attribute is a sizes expression based on media expressions
as similar to the img sizes attribute,
but with two key differences:
- It applies to the height and not width of the element.
- Percent values are allowed, e.g.
86%. If a percent value is used, it indicates the percent of the element's width.
heights attribute is specified along with
layout is defaulted to
<amp-img src="https://acme.org/image1.png" width="320" height="256" heights="(min-width:500px) 200px, 80%"> </amp-img>
In this example, the height of the element by default will be 80% of the width, but for the viewport
500px it will be capped at