Suggest an edit

Improve this article

Refine the answer for “What does the srcset attribute do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `srcset` attribute on the `<img>` tag allows you to specify **several versions of the same image**, with different sizes or resolutions, and gives the browser the ability to **choose on its own** which image to load depending on the user's screen.

It is the foundation of the **responsive images** technology.

---

### 1. Simplest example

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  alt="Landscape">
```

How this works:

- the browser sees that there are three options: 400, 800, and 1600 pixels;
- checks **the width of the display area** and **the screen's pixel density**;
- picks the optimal file (for example, `photo-400.jpg` for a phone or `photo-1600.jpg` for a Retina monitor).

---

### 2. The `srcset` syntax

In `srcset` you can specify:

1. **several files**: separated by commas;
2. **each file** is accompanied by:
  - either **its width in pixels** (`400w`, `800w`, etc.),
  - or **its pixel density** (`1x`, `2x`).

Example with widths:

```html
srcset="
  img-400.jpg 400w,
  img-800.jpg 800w,
  img-1600.jpg 1600w"
```

Example with densities (for Retina displays):

```html
srcset="
  logo-1x.png 1x,
  logo-2x.png 2x"
```

---

### 3. How the browser chooses a picture

The selection algorithm:

1. It looks at the available space for the image (for example, 600 pixels wide).
2. It looks at `srcset` and finds the closest matching value.
3. It loads **the version that best matches the size** (without extra weight, but with the needed quality).

---

### 4. Often used together with the `sizes` attribute

To let the browser more precisely understand **what width the picture uses at different screen sizes**, the `sizes` attribute is added.

Example:

```html
<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
  alt="Sunset by the sea">
```

Interpretation:

- if the screen is ≤ 600px → use 400w;
- if ≤ 1200px → 800w;
- if larger → 1600w.

---

### 5. Without `sizes`

If `sizes` is not specified, the browser assumes the image occupies the full width of the window (`100vw`)
and picks the picture that best matches the device's width.

---

### 6. Example with Retina screens (`x`)

```html
<img
  src="avatar-1x.jpg"
  srcset="avatar-1x.jpg 1x, avatar-2x.jpg 2x"
  alt="Profile photo">
```

The browser on a regular screen will load `1x`,
and on Retina: `2x` (twice as sharp).

---

### 7. Advantages of `srcset`

| Advantage | Description |
|---|---|
| Faster loading | The optimally-sized file loads |
| Less bandwidth | Mobile devices do not download huge images |
| High quality | Retina displays get more detailed versions |
| SEO and UX | Core Web Vitals and perceived speed improve |

---

### Summary:

| Attribute | Purpose |
|---|---|
| `srcset` | A list of images with their sizes or density specified |
| Value formats | `photo-800.jpg 800w`, `logo-2x.png 2x` |
| Works with | `sizes` for adaptive selection |
| Goal | Automatic selection of the right file for the user's screen |

---

**In simple terms:**
`srcset` is like a menu for the browser:

> "Here are three versions of the same picture, pick the one
> that fits your screen and loading speed."

Markdown · drag & drop images · ⌘B / ⌘I shortcuts521 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.