The sizes attribute specifies different widths for an image.
These widths are tied to browser conditions which helps create responsive images.
Elements that accept this attribute include <img>, <link>, and <source>.
A sizes attribute on an <img> element.
Resizing the browser will adjust the image file that will display.
<img srcset="/img/html/vangogh-sm.jpg 120w,
/img/html/vangogh.jpg 193w,
/img/html/vangogh-lg.jpg 278w"
sizes="(max-width: 710px) 120px,
(max-width: 991px) 193px,
278px">
The three images of different size.
A small image is used with a screen between 0 - 710px. The layout width is 120px.
A medium image is used with a screen between 711px - 991px. The layout width is 193px.
A large image is used with a screen 992px and larger. The layout width is 278px.
See below for a detailed description.
The srcset and sizes attributes work together to create responsive images.
The srcset attribute points to image URLs.
And sizes specifies image sizes and browser conditions (media queries).
Each size in sizes has the following format: (media-condition) width
media-condition = Media query (e.g max-width: 540px), followed by a space.width = The width of the available space in pixels (px), em, or viewport (vw).<img srcset="/img/new-york-sm.jpg 120w,
/img/new-york-md.jpg 200w,
/img/new-york-lg.jpg 300w"
sizes="((min-width: 10em) and (max-width: 20em)) 10em,
((min-width: 30em) and (max-width: 40em)) 30em,
(min-width: 40em) 40em">
On a <link> element the sizes attribute defines the icon dimensions.
<tagname sizes="(media-condition) width">
Note: Multiple values are comma-separated.
| Value | Description |
|---|---|
| (media-condition) width |
A media-query followed by the image layout width. The layout width can be defined with px, em, or vw. |
The following elements accept the sizes attribute.
| Elements | Description | |
|---|---|---|
| <img> | Specifies an image -- see example above | |
| <link> | Defines the relationship between the current page and an external resource. | |
| <source> | Specifies an audio, video, or picture source. |
A <link> tag with a sizes attribute. It specifies the icon dimensions.
<link rel="icon" href="/img/html.png" type="image/png" sizes="32x32">
For additional details see our HTML link sizes Reference.
A <source> tag with a sizes attribute.
<picture>
<source srcset="/img/html/vangogh-sm.jpg 120w,
/img/html/vangogh.jpg 193w,
/img/html/vangogh-lg.jpg 278w"
sizes="(max-width: 710px) 120px,
(max-width: 991px) 193px,
278px">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
For additional details see our HTML source sizes Reference.
Here is when sizes support started for each browser:
 Chrome
|
34.0 | Apr 2014 |
 Firefox
|
38.0 | May 2015 |
 IE/Edge
|
16.0 | Oct 2017 |
 Opera
|
25.0 | Oct 2014 |
 Safari
|
9.0 | Sept 2015 |
