HTML srcset Attribute

The srcset attribute specifies multiple resources (URLs) for an element. Together with the sizes attribute they create responsive images that adjust according to browser conditions. Elements that accept srcset include <img> and <source>.

Example

#

A srcset attribute on an <img> element.
Resizing the browser will adjust the image file used.

<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 srcset images

Code Explanation

The srcset specifies 3 images of different size: small, medium, large.

The specified sizes are 120, 193, and 278 pixels respectively.

The 'w' unit indicates width (in pixels).

For additional details see our HTML img srcset Reference.


Using srcset

The srcset attribute specifies multiple images our sources of different size or quality.

Together with the sizes attribute they create responsive behavior that adjust according to media conditions, such as browser size.

Each src in srcset has the following format: URL width

  • URL = Url or path to the image file.
  • width = Actual image width in units of w (e.g. 450w).
  • Multiple src items are comma-separated. Here's an example:
srcset="/img/new-york-sm.jpg 250w,
        /img/new-york-md.jpg 450w,
        /img/new-york-lg.jpg 750w"

Syntax

<tagname srcset="URL width">

Note: Multiple values are comma-separated.

Values

#

Value Description
URL width The URL or path of the image file, followed by the actual image width.
Image width is measured in pixels but using the w unit. (e.g. 250w is 250px).

Elements that accept srcset

These elements accept the srcset attribute.

Elements Description
<img> Specifies an HTML image -- see example above
<source> Sets the audio, video, or picture source.

<source> with srcset

A <source> tag with a srcset 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 srcset Reference.


Browser support

Here is when srcset support started for each browser:

Chrome
38.0 Oct 2014
Firefox
38.0 May 2015
IE/Edge
13.0 Nov 2015
Opera
25.0 Oct 2014
Safari
9.1 Mar 2016

You may also like



Guides