References

Beginner-friendly references for web development, with live, editable examples.

The HTML srcset attribute

Attribute All modern browsers Updated
Quick answer

The HTML srcset attribute provides a set of candidate images for the browser to choose from based on screen density or width. It is used on the <img> and <source> elements.

Overview

The srcset attribute provides a set of candidate images for the browser to choose from based on screen density or width. It applies to the <img> and <source> elements.

Pair width descriptors (w) with the sizes attribute so the browser can pick the best file before layout.

Syntax

<img src="m.jpg" srcset="s.jpg 480w, l.jpg 1080w" sizes="(max-width:600px) 480px, 1080px" alt="">

Values

Value
A comma-separated list of "URL descriptor" pairs, e.g. small.jpg 480w, large.jpg 1080w or 1x/2x.

Best practices

  • Always give an <img> meaningful alt text (or empty alt="" if purely decorative).
  • Set width and height (or a CSS aspect-ratio) so the layout does not shift as images load.
  • Use srcset and sizes to serve appropriately sized images on each screen.
  • Add loading="lazy" to below-the-fold images.

Frequently asked questions

What does the srcset attribute do?
Lists responsive image candidates.
How do I make images responsive?
Use srcset with sizes on the <img>, or a <picture> for art direction and modern formats.
How do I stop images causing layout shift?
Set the width and height attributes (or a CSS aspect-ratio) so the space is reserved.
Which elements use the srcset attribute?
It is an element-specific attribute, used on the <img> element (and <picture>).
srclang start