srcset
Several files of one image in different sizes: the browser picks the one that fits the screen.
Syntax
<img src="s.jpg" srcset="s.jpg 400w, l.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="…">Parameters
| Parameter | Type | Description |
|---|---|---|
| srcset | URL + width (400w) or density (2x) | A list of files with their width or pixel density. |
| sizes | media conditions + width | How wide the image will be on screen under different conditions. |
Examples
Choosing by the image's width on screen:
<img
src="/media/photo-400x250.jpg"
srcset="/media/photo-400x250.jpg 400w, /media/photo-800x500.jpg 800w"
sizes="(max-width: 600px) 100vw, 400px"
alt="A cup of coffee" style="max-width: 100%;">Choosing by pixel density (Retina):
<img src="/media/photo-400x250.jpg"
srcset="/media/photo-400x250.jpg 1x, /media/photo-800x500.jpg 2x"
alt="A cup of coffee" width="400">Notes
The browser decides which file to take, considering the screen and even the network speed — so you may see different files in different conditions. sizes is needed only with w descriptors. If narrow screens need a different picture (another crop), use <picture>.
See also
- <img> — An image.
- <picture> — A container for several versions of an image: the browser picks a matching `<source>` or falls back to `<img>`.
- <source> — One of the file versions for `<video>`, `<audio>` or `<picture>`.
- src — The address of the embedded file for `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
Related recipes
In the tutorial
- Responsive images — How pictures adapt to the screen — max-width, aspect-ratio, object-fit, the srcset and sizes attributes, the picture element.