Responsive Images
How Browsers Choose an Image Size
Responsive images are images supplied in several sizes, so the browser can download the version that fits the screen it is shown on. The main HTML attributes for this are srcset, which lists the available files, and sizes, which tells the browser how wide the image will be on the page.
Without responsive images, a site sends one file to every device. A phone with a narrow screen then downloads a large desktop image and scales it down, wasting bandwidth and time. Responsive images avoid this by letting the browser make the choice.
The browser takes the viewport width and the screen's pixel density into account, and some browsers consider other factors as well. It then picks the candidate that best matches the space the image occupies. Oversized files are one of the common reasons images contribute to slow pages, which is why image optimization includes choosing the right size.
Width Descriptors, Pixel Density and the picture Element
Two forms of srcset are common. Width descriptors, written as 480w, state the real pixel width of each file and are used together with sizes. Pixel-density descriptors, written as 2x, suit an image with a fixed display size, where the browser only needs to choose between normal and high-density screens.
The picture element goes further. It lets a page offer different sources for different conditions, such as a cropped image for narrow screens and a wide image for large ones, or a modern format with a fallback such as WebP or AVIF. The browser uses the first source it can handle.
A Product Photo on Phone and Desktop
An online shop shows a product photo that fills the full width of a phone screen but only a third of a desktop screen. Without responsive images, both devices download the same 2000-pixel file. With them, the phone can use a file of about 600 pixels and the desktop a larger one, so the phone loads far fewer bytes.
Setting the width and height attributes on the image also helps. The browser reserves the space before the file arrives, so the page does not jump as the image appears.
Frequently asked questions
What Does the Sizes Attribute Do?
The sizes attribute tells the browser how wide the image will be at different viewport widths, for example 100vw on small screens and 33vw on larger ones. The browser combines this with the width descriptors to pick a file. Without sizes, the browser assumes the image fills the full viewport, which can mean downloading a larger file than needed.
Do Responsive Images Prevent Layout Shift?
Not by themselves. Responsive images choose a file, but the space they take up is set by width and height attributes or CSS aspect ratios. Declaring the image's dimensions lets the browser reserve the right amount of room, which prevents most of the layout shift caused by images.