A string containing a comma-separated list of one or more imagecandidate strings to be used when determining which image resource to present inside the<img> element represented by theHTMLImageElement.

Each image candidate string must begin with a valid URL referencing a non-interactivegraphic resource. This is followed by whitespace and then a condition descriptor thatindicates the circumstances in which the indicated image should be used. Spacecharacters, other than the whitespace separating the URL and the corresponding conditiondescriptor, are ignored; this includes both leading and trailing space, as well as spacebefore or after each comma.

The condition descriptor may take one of two forms:

• To indicate that the image resource specified by the image candidate string shouldbe used when the image is being rendered with a particular width in pixels, provide awidth descriptor comprised the number giving that width in pixelsfollowed by the lower case letter "w". For example, to provide an image resource to beused when the renderer needs a 450 pixel wide image, use the width descriptor string450w. The specified width must be a positive, non-zero, integer, andmust match the intrinsic width of the referenced image. When asrcset contains"w" descriptors, the browser uses those descriptors together with thesizes attribute to pick a resource.
• Alternatively, you can use apixel density descriptor, whichspecifies the condition in which the corresponding image resource should be used asthe display's pixel density. This is written by stating the pixel density as apositive, non-zero floating-point value followed by the lower-case letter "x". As anexample, to state that the corresponding image should be used when the pixel densityis double the standard density, you can give the pixel density descriptor2x or2.0x.

If the condition descriptor is not provided (in other words, the image candidateprovides only a URL), the candidate is assigned a default descriptor of "1x".

"images/team-photo.jpg, images/team-photo-retina.jpg 2x"

This string provides versions of an image to be used at the standard pixel density(undescribed, assigned a default of1x) as well as double that pixel density (2x).

When an image element'ssrcset contains "x" descriptors, browsers also considerthe URL in thesrc attribute (if present) as acandidate, and assign it a default descriptor of1x.

"header640.png 640w, header960.png 960w, header1024.png 1024w"

This string provides versions of a header image to use when theuser agent'srenderer needs an image of width 640px, 960px, or 1024px.

Note that if any resource in asrcset is described with a "w" descriptor, allresources within thatsrcset must also be described with "w" descriptors, andthe image element'ssrc is not considereda candidate.

The HTML below indicates that the default image resource, contained within thesrc attribute should be used for 1xdisplays, and that a 400-pixel version (contained within thesrcset, and assigneda2x descriptor) should be used for 2x displays.

<div>  <img    src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"    alt="Clock"    srcset="      /en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 2x    " /></div>

The CSS specifies that the image and its surrounding box should be 200 pixels squareand should have a simple border around it. Also provided is theword-break attribute, using thebreak-all value to tell thebrowser to wrap the string within the width available regardless of where in the stringthe wrap must occur.

.box {  width: 200px;  border: 2px solid rgb(150 150 150);  padding: 0.5em;  word-break: break-all;}.box img {  width: 200px;}

The following code is run within a handler for thewindow'sload event. It uses the image'scurrentSrc property to fetch and displaythe URL selected by the browser from thesrcset.

window.addEventListener("load", () => {  const box = document.querySelector(".box");  const image = box.querySelector("img");  const newElem = document.createElement("p");  newElem.textContent = "Image: ";  newElem.appendChild(document.createElement("code")).textContent =    image.currentSrc;  box.appendChild(newElem);});

In the displayed output below, the selected URL will correspond with whether yourdisplay results in selecting the 1x or the 2x version of the image. If you happen tohave both standard and high density displays, try moving this window between them andreloading the page to see the results change.

For additional examples, see our guide toresponsive images.

• HTML images
• Responsive images
• Image file type and format guide