HTML sizes Attribute

The sizes attribute specifies the width for an image depending on browser conditions. This attribute helps create responsive images that vary depending on the browser conditions. Elements that accept this attribute include <img>, <link>, and <source>.

Example

#

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.

Code Explanation

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.


Using sizes

The srcset attribute specifies multiple image URLs and image sizes.

Together with the sizes attribute they create responsive images that adjust according to browser conditions.

Each size in the sizes attribute 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).
  • Multiple sizes are comma-separated. Here is an example:
<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.


Syntax

<tagname sizes="(media-condition) width">

Note: Multiple values are comma-separated.


Values

#

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.

Elements that accept sizes

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.

<link> with sizes

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.


<source> with sizes

A <source> tag with a sizes attribute.

Vincent Van Gogh
<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.


Browser support

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

You may also like



Guides