References

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

The HTML imagesrcset attribute

Attribute All modern browsers Updated
Quick answer

The HTML imagesrcset attribute provides a responsive srcset for a preloaded image, mirroring an <img> element's srcset attribute. It is used on the <link rel="preload" as="image"> element.

Overview

The imagesrcset attribute provides a responsive srcset for a preloaded image, mirroring an <img> element's srcset attribute. It applies to the <link rel="preload" as="image"> element.

It lets you preload the same responsive image the browser will later pick for an <img>, pairing with imagesizes.

Syntax

<link rel="preload" as="image" imagesrcset="s.jpg 480w, l.jpg 1080w" imagesizes="100vw">

Values

Value
A srcset string: comma-separated "URL descriptor" pairs.

Best practices

  • Declare the character encoding with <meta charset="utf-8"> first in the <head>.
  • Load scripts with defer (or as modules) so they do not block parsing.
  • Protect third-party resources with integrity and crossorigin (Subresource Integrity).
  • Use resource hints like preload deliberately, paired with the right as value.

Frequently asked questions

What does the imagesrcset attribute do?
Sets a responsive srcset for a preloaded image.
Where do head attributes apply?
On the metadata elements in the <head>: <meta>, <link>, <script> and <base>.
What is the difference between async and defer?
async runs a script as soon as it loads in no set order; defer runs scripts in order after the document is parsed.
Which elements use the imagesrcset attribute?
It is an element-specific attribute, used on the <link rel="preload" as="image"> element.
imagesizes integrity