coderef

srcset and sizesBaseline · Widely available

The srcset and sizes attributes for <img> elements set a list of possible sources for the image and a corresponding list of size conditions for choosing a source, to show a responsive image that fits the size of the display.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 27, 2017. Widely available since Sep 27, 2019.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–37Not supported
38+Supportedsince Oct 7, 2014
Current: 155
Edge
12–12Not supported
13+Supportedsince Nov 12, 2015
Current: 154
Firefox
1–37Not supported
38+Supportedsince May 12, 2015
Current: 157
Safari
1–10Not supported
10.1+Supportedsince Mar 27, 2017
Current: 27
MobileChrome Android
18–37Not supported
38+Supportedsince Oct 8, 2014
Current: 155
Firefox Android
4–37Not supported
38+Supportedsince May 12, 2015
Current: 157
Safari iOS
1–10Not supported
10.3+Supportedsince Mar 27, 2017
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

HTML
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="…">

Feature detection

JS · check before using
if ("HTMLImageElement" in globalThis && "srcset" in HTMLImageElement.prototype) {
  // HTMLImageElement.srcset is available
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
HTMLImageElement.sizes3813389.138389.3
HTMLImageElement.srcset341238834388
HTMLSourceElement.sizes38133810.1383810.3
HTMLSourceElement.srcset38133810.1383810.3
img.sizes3812389.138389.3
img.srcset341238834388
source.sizes3413389.134389.3
source.srcset3413389.134389.3