Skip to main content
srcset attribute | srcset property

Specifies a list of one or more possible images to display based on the pixel density of the user's display, or the viewport width.

Syntax

HTML
<element srcset="p" ... >

 

Property values

Type: String

A list of one or more possible images to display based on the pixel density or the width of the viewport.

Standards information

Remarks

The srcset value must be made up of one or more comma separated image candidates. Each value must begin with a space.

A pixel density descriptor or width descriptor must be present. These two descriptors can't be mixed in the same srcset.

A pixel density descriptor consists of a space that follows the image URL, a number greater than zero that represents the pixel density descriptor value, and a lowercase "x" character. For example, "large.jpg 2x".

A width descriptor can be used in the place of a pixel density descriptor. A width descriptor consists of a space, a valid integer that is greater than zero which represents the intrinsic width of the image, and a lowercase "w" character. An example of this would be "large.jpg 600w". It is important to note that the sizes attribute is required to use the width descriptor.

Two images can't have the same width descriptor/pixel density value for the same element.

For more information, see Introducing srcset, our first step towards fully responsive images in Microsoft Edge.

Examples

In the example below, an img element contains both the src attribute and the srcset attribute. The srcset attribute provides the browser with three images of varying resolutions for a single image.


<img src="fallback.jpg" srcset="medium.jpg 1x, large.jpg 2x, xlarge.jpg 3x" />

The example below shows an img element that uses the width descriptor instead of the pixel density descriptor.


<img src="fallback.jpg" sizes="100vw" srcset="medium.jpg 320w, large.jpg 640w, xlarge.jpg 1024w" /> 

See also

img
source