Syntax
<img src="photo-240.jpg" srcset="photo-240.jpg 240w, photo-480.jpg 480w" sizes="(max-width: 480px) 90vw, 240px" alt="Landscape" width="240" height="120">Examples
Responsive Images with srcset and sizes: working example
Save as an HTML file and open it in a browser. Expected result: A blue badge appears. The browser may choose either embedded candidate according to the viewport and pixel density.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML example</title>
<style>img { display: block; width: 90vw; height: auto; } @media (min-width: 481px) { img { width: 240px; } }</style>
</head>
<body>
<p>Resize the window or change device pixel density to let the browser choose a source.</p>
<img id="sample" width="240" height="120" alt="Blue demonstration badge marked responsive">
<p id="selected"></p>
<script>
// Create two self-contained demo files so this example needs no image server.
function imageData(width) {
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width / 2}" viewBox="0 0 240 120"><rect width="240" height="120" rx="16" fill="#2563eb"/><text x="120" y="68" text-anchor="middle" fill="white" font-size="23">Responsive</text></svg>`;
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}
const small = imageData(240);
const large = imageData(480);
const sample = document.querySelector("#sample");
sample.addEventListener("load", () => {
document.querySelector("#selected").textContent = `Image loaded. Display width: ${sample.clientWidth}px.`;
});
sample.sizes = "(max-width: 480px) 90vw, 240px";
sample.srcset = `${small} 240w, ${large} 480w`;
sample.src = small;
</script>
</body>
</html>- The script only creates two embedded SVG image resources for a portable demo. In a real page, write the src, srcset and sizes attributes directly in HTML, using real image files as shown in the syntax line.
- 240w and 480w describe each file’s intrinsic pixel width. sizes gives the expected rendered width: 90vw in viewports up to 480px wide, otherwise 240px.
- The browser can consider pixel density and other conditions when choosing a candidate, so do not promise that a particular device always downloads a specific file. The load message confirms display, not which candidate was selected.
- The alt text describes the badge once; all candidates represent the same content. width and height reserve an aspect ratio before loading.
Best practices
- Use accurate width descriptors that match the real image files.
- Keep useful alt text and an src fallback.
- Do not mix w and x descriptors in the same srcset; use picture for different crops.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<img> srcset
Desktop
- Chrome
- Supported
From 34 - Firefox
- Supported
From 38 - Safari
- Supported
From 8 - Edge
- Supported
From 12 - Opera
- Supported
From 21
Mobile
- Safari on iOS
- Supported
From 8 - Chrome for Android
- Supported
From 34 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 2.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 34
Firefox
- From 38
Safari
- From 8
Edge
- From 12
Opera
- From 21
Safari on iOS
- From 8
Chrome for Android
- From 34
Firefox for Android
- From 38
Samsung Internet
- From 2.0
<img> sizes
Desktop
- Chrome
- Supported
From 38 - Firefox
- Supported
From 38 - Safari
- Supported
From 9.1 - Edge
- Supported
From 12 - Opera
- Supported
From 25
Mobile
- Safari on iOS
- Supported
From 9.3 - Chrome for Android
- Supported
From 38 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 3.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 38
Firefox
- From 38
Safari
- From 9.1
Edge
- From 12
Opera
- From 25
Safari on iOS
- From 9.3
Chrome for Android
- From 38
Firefox for Android
- From 38
Samsung Internet
- From 3.0
<img> alt
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 3
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<img> width
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 3
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<img> height
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 3
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.