HTML srcset Attribute

The HTML srcset attribute provides one or more image candidates that a browser can choose from. It is used with the <img> and <source> elements to provide responsive images for different display sizes, resolutions, and other browsing conditions.

Elements That Use the srcset Attribute

The srcset attribute is used with the <img> and <source> elements.

Element	Description
`<img>`	Provides multiple image candidates from which the browser can select.
`<source>`	Provides image candidates when used inside a `<picture>` element.

srcset Attribute Value

The srcset value contains one or more image candidates separated by commas. Each candidate contains an image URL and can include either a width descriptor or a pixel density descriptor.

<img srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="100vw"
     src="image-400.jpg"
     alt="Responsive image example">

A candidate without a descriptor is treated as having a 1x pixel density descriptor.

Width Descriptors

A width descriptor uses a positive integer followed by w to specify the intrinsic width of an image candidate in pixels.

srcset="image-400.jpg 400w,
        image-800.jpg 800w,
        image-1200.jpg 1200w"

The width given by each w descriptor must match the natural width of its image. When one candidate uses a width descriptor, all candidates in that srcset must use width descriptors.

Width descriptors are normally combined with the sizes attribute so the browser can determine the most appropriate image candidate for the intended display size.

Pixel Density Descriptors

A pixel density descriptor uses a positive number followed by x. It describes the intended pixel density of an image candidate.

<img src="logo.png"
     srcset="logo.png 1x,
             logo-2x.png 2x"
     alt="Example logo">

In this example, the browser can choose the higher-density image for a display where additional image resolution is useful.

Do not mix width descriptors and pixel density descriptors within the same srcset value.

Using srcset with sizes

When srcset uses width descriptors, the sizes attribute provides information about the intended layout width of the image. The browser uses that information together with the available image candidates to select a resource.

<img src="image-400.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Responsive image example">

In this example, the image is expected to use the full viewport width when the viewport is 600 pixels wide or less. At larger viewport widths, its intended display width is 600 pixels.

Using srcset with <source>

Inside a <picture> element, <source> uses srcset to provide image candidates. The media or type attributes can help the browser determine which source is appropriate.

<picture>
  <source media="(min-width: 800px)"
          srcset="large-image.jpg">
  <source media="(min-width: 500px)"
          srcset="medium-image.jpg">
  <img src="small-image.jpg"
       alt="Responsive image example">
</picture>

When a <source> element is used inside <picture>, its image candidates are specified with srcset, not src.

Browser Image Selection

The browser selects an image candidate based on the information provided by srcset, sizes, and the current browsing environment. Factors such as the intended display size, device pixel density, zoom level, and network conditions can affect which resource is selected.

The browser makes the final resource-selection decision. Authors provide suitable candidates rather than instructing the browser to download one particular candidate at a specific viewport width.

Common Mistakes

Do not mix w width descriptors and x pixel density descriptors in the same srcset value.

Do not specify an incorrect width with a w descriptor. The descriptor must match the natural width of the referenced image.

When srcset uses width descriptors on an <img>, include an appropriate sizes attribute so the browser has the source-size information needed for image selection.

Do not expect the browser to select a particular image solely because of the viewport width. Device pixel density, zoom, and other factors can influence resource selection.

Do not use src on a <source> element inside <picture>. Use srcset for its image candidates.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The srcset attribute is widely supported on both <img> and <source> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the srcset Attribute

The example provides several versions of the same image at different widths. Resize the editor preview to see how the browser can select an appropriate image candidate for the available display size.

Play in Editor

Summary

The HTML srcset attribute provides multiple image candidates for responsive image selection. It can use w descriptors to identify image widths or x descriptors to identify pixel densities. Width descriptors work with sizes to give the browser information about the intended display size, while <source> elements inside <picture> can use srcset for responsive image and art-direction choices.