There are two forms of responsive images, and they are for two different things.
If your only goal is to increase productivity, then you need …
Using responsive images provides significant performance gains. Image weight has a huge impact on overall page performance, and responsive images are one of the best ways to reduce image weight. Imagine a browser can choose between a 300×300 or 600×600 image. If the browser only needs 300×300, that”s potentially a 4x savings! Savings typically increase as screen resolution and viewport size decrease; on small screens, as a couple of these case studies show, savings of 70-90% are possible.
If design control is also important to you, then you need …
Another purpose of responsive images is not just to serve different sizes of the same image, but to serve different images as well. For example, cropping an image differently based on screen size and layout differences. This is called “art direction”.
The picture element is also used for fallback image types and any other type of media query switching (for example, for different images in dark mode). You get more control over what browsers display.
There is a lot to talk about here, so let”s go over both syntaxes, all the associated attributes and values, and also talk about a few related concepts like tools and browsers.
The <img srcset = “” src = “” alt = “”> syntax is meant to serve different sizes of the same version of an image. You can try using completely different images with this syntax, but browsers assume that everything in a srcset is visually identical and will choose whatever size they think will be the best in a non-predictable way, so I would not recommend it.
Perhaps the simplest possible syntax for responsive images is to add a srcset attribute with x descriptors to tag images for use on displays with different pixel densities.
Here we made a copy of the default image (src) in low resolution (1 ×). Making the default the smallest / fastest asset is usually a smart choice. We also provide a 2x version. If the browser knows it is on a display with a higher pixel density (2x), it will use that image.
You can create as many pixel density variations as you like.
While cool and useful, x-descriptors only account for a small percentage of responsive image usage. Why? They only allow browsers to adapt based on one thing: pixel density. However, responsive images are often used in responsive layouts, and the size of the image layout shrinks and stretches with the viewport. In such situations, the browser must make decisions based on two things: the pixel density on the screen and the size of the image layout. This is where the w descriptor and the sizes attribute come into play, which we”ll look at in the next section.
Using srcset / w + sizes
This is a useful thing. It accounts for about 85% of the use of responsive images on the web. We still provide the same image in different sizes, only we give the browser more information so that it can adapt based on both pixel density and layout size.
We still provide multiple copies of the same image and let the browser choose the one that best suits them. But instead of labeling them by pixel density (x), we label them with resource width using w-descriptors. So if baby-s.jpg is 300 × 450, we mark it as 300w.
Using srcset with width descriptors (w) means that it will need to be bound to the sizes attribute so the browser knows how much space the image will take up. Without this information, browsers cannot make smart choices.
Specifying the exact sizes
Specifying the sizes attributes can get tricky. The sizes attribute describes the width at which the image will be displayed in the layout of your particular site, which means that it is closely related to CSS. The rendering width of images depends on the layout, not just the viewport!
Let”s take a look at a fairly simple layout with three breakpoints.
The image size is different at each control point. Here is a breakdown of all the slices that affect the width of the image layout at its largest breakpoint (when the viewport is wider than 700px):
HTML Responsive Image Syntax Guide
The image width is 100vw minus any explicit margins, padding, column widths, and gap sizes.