HTML Responsive Images

Understanding HTML Responsive Images

Responsive images allow browsers to select an appropriate image file based on factors such as the device, screen resolution, and space available in the page layout.

HTML provides the srcset and sizes attributes for supplying multiple versions of an image while allowing the browser to decide which resource is most appropriate.

Why Use Responsive Images

A large image may look good on a wide desktop display but can contain far more image data than a smaller screen needs. Sending the same large file to every device can waste bandwidth and increase loading time.

Responsive images allow several versions of the same image to be provided so the browser can choose a suitable resource for the current display conditions.

The srcset Attribute

The srcset attribute provides a list of image candidates that the browser can choose from.

<img src="/img/images/image-600x400.jpg"
     srcset="/img/images/image-300x200.jpg 300w,
             /img/images/image-600x400.jpg 600w,
             /img/images/image-900x600.jpg 900w,
             /img/images/image-1200x800.jpg 1200w"
     alt="Responsive image example"
     width="600"
     height="400">

Each image URL is followed by information that tells the browser about that candidate. In this example, the values ending in w describe the intrinsic width of each image in pixels.

Width Descriptors

A width descriptor identifies the intrinsic width of an image candidate by placing the image width followed by w after its URL.

/img/images/image-300x200.jpg 300w
/img/images/image-600x400.jpg 600w
/img/images/image-900x600.jpg 900w
/img/images/image-1200x800.jpg 1200w

The descriptor must correspond to the actual intrinsic width of the image file. For example, an image that is 900 pixels wide uses the 900w descriptor.

The browser uses this information together with the image's expected display size and device characteristics when selecting a candidate.

The sizes Attribute

When width descriptors are used in srcset, the sizes attribute tells the browser approximately how much layout width the image is expected to occupy under different conditions.

<img src="/img/images/image-600x400.jpg"
     srcset="/img/images/image-300x200.jpg 300w,
             /img/images/image-600x400.jpg 600w,
             /img/images/image-900x600.jpg 900w,
             /img/images/image-1200x800.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Responsive image example"
     width="600"
     height="400">

In this example, the browser is told that the image will occupy approximately the full viewport width when the viewport is 600 pixels wide or less. On wider viewports, the expected image width is 600 pixels.

The sizes attribute describes the expected layout size; it does not by itself resize the image on the page.

The src Attribute

The regular src attribute remains part of a responsive <img> element and provides a default image source.

<img src="/img/images/image-600x400.jpg"
     srcset="/img/images/image-300x200.jpg 300w,
             /img/images/image-600x400.jpg 600w,
             /img/images/image-900x600.jpg 900w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Responsive image example"
     width="600"
     height="400">

Modern browsers that understand srcset can select from the supplied candidates rather than simply using the file specified by src.

Responsive Display Size

The responsive image selection features of HTML determine which image resource the browser loads, while CSS normally controls how large that image appears within the page layout.

img {
  max-width: 100%;
  height: auto;
}

With this CSS, an image can shrink when its container becomes narrower than the image's natural display width while maintaining its proportions.

This is an important distinction: HTML can help the browser choose an appropriately sized file, while CSS controls the image's visual size and behavior in the layout.

Pixel Density Descriptors

The srcset attribute can also use pixel density descriptors such as 1x and 2x when multiple image files represent the same image at different pixel densities.

<img src="/img/images/image-600x400.jpg"
     srcset="/img/images/image-600x400.jpg 1x,
             /img/images/image-1200x800.jpg 2x"
     alt="Responsive image example"
     width="600"
     height="400">

In this example, the 600 by 400 image is the standard-density resource and the 1200 by 800 image provides twice as many pixels in each dimension for higher-density displays.

Width descriptors and pixel density descriptors are two different approaches and should not be mixed within the same srcset value.

Responsive Image Example

The following example uses the standardized image sizes to give the browser several versions of the same image from which to choose.

<h1>Responsive Image Example</h1>

<img src="/img/images/image-600x400.png"
     srcset="/img/images/image-300x200.png 300w,
             /img/images/image-600x400.png 600w,
             /img/images/image-900x600.png 900w,
             /img/images/image-1200x800.png 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Responsive image example"
     width="600"
     height="400">

<p>Resize the browser window to change the space available to the image.</p>

Try resizing the editor or opening the example in the full editor window. The browser can use the information in srcset and sizes to select an appropriate image resource for the current conditions.

Responsive Image Best Practices

• Provide image candidates that represent useful size differences rather than many nearly identical files.
• Make sure each w descriptor accurately matches the intrinsic width of its image file.
• Use sizes to describe the expected layout width when using width descriptors.
• Use CSS to control how the image actually responds to the available layout space.
• Keep the same aspect ratio across candidates when they represent differently sized versions of the same image.
• Provide appropriate alt text regardless of which image candidate the browser selects.
• Include width and height attributes to establish the image's aspect ratio and help reduce layout movement.
• Optimize every candidate image rather than assuming smaller dimensions automatically mean an efficiently encoded file.

Summary

Responsive images allow browsers to choose from multiple versions of an image based on the expected display size and device characteristics. The srcset attribute supplies image candidates, the sizes attribute describes the expected layout width, and CSS controls how the selected image is displayed within the responsive page layout.