What does the srcset attribute do?

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

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:

Example with densities (for Retina displays):

---

#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:

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)

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

---

#7. Advantages of srcset

---

#Summary:

---

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."