Using src

In the original specification of the img element we could choose one image to be shown shown (by using the src attribute). No matter how wide or narrow our browser viewport, the same one image is shown.

The viewport is currently pixels wide - if you resize the browser window (or if you're on a phone if you switch between landscape and portrait orientation, you should see this number change, but) the image will not change.

Using srcset

srcset is an optional attribute that allows multiple comma-separated image URLs to be specified. It's up to the browser to select which one.

When using srcset the browser decides which image to download. It is likely (at the time of writing) that your browser will select the first image to display, so on its own the basic srcset attribute doesn't give us anything extra.

Width Hints

In addition to the image URL we can add a width hint which comes after the URL. The browser will use the size of the space in which the image will go when selecting which image to load. So on a phone with limited pixels, a small image may be shown, whereas on a huge desktop the massive 3200x400 image may be chosen.

NB: The src attribute is always required (you will find it in all the examples here) because it provides default fallback content.

Only one image is loaded initially. If you start the page small and expand it, larger and larger images are loaded as necessary. If you start the page large, the opposite may not be true.

Notice that as the page gets wider (currently pixels) there may not be a direct correlation between the viewport width and the width of the image that is loaded.

Browsers that have cached a higher resolution version of an image may continute to use it, so to see this effect is may be necessary to use an 'incognito' window.

Adding sizes

The sizes attribute is closely related to srcset. It helps the browser decide which image to use when the browser is different widths.

If a sizes attribute is used there must be one entry for each url in the srcset attribute.

There is a philosophical quandry here - which is that the 'sizes' attribute here muddies the waters of separating form and content - the same results can be achieved using CSS, and the fact that CSS selectors are being used in an attribute reinforces these philosophical concerns. Furthermore, it's only possible to control the width of the image using sizes, so it may be useful only in limited situations.

Pixel Density

Pixels are not all the same size - some screens have higher pixel-density than others. The srcset attribute affords for coping with these situations by adding pixel density information to each URL. The image displayed here will differ depending upon the pixel density of the device on which it is shown.

You can simulate differnt pixel densities in the device toolbar (look for DPR, short for Device Pixel Ratio).