The srcset attribute on a <source> tag specifies multiple image resources (URLs) for the source element.
Together with the sizes attribute they create responsive images that adjust according to browser conditions.
A srcset attribute on a <source> element.
Resizing the browser will adjust the image file used.
<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>
The three srcset images
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).
The <picture> also includes an overflow <img> element for when there is no matching image in the srcset.
The srcset attribute specifies multiple images of different size or quality.
Together with the sizes attribute they create responsive images that adjust according to media conditions, such as browser size.
Each src in srcset has the following format: URL width
srcset="/img/new-york-sm.jpg 250w,
/img/new-york-md.jpg 450w,
/img/new-york-lg.jpg 750w"
<source srcset="URL width">
Note: Multiple values are comma-separated.
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). |
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 |