THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP HOW TO JQUERY W3.CSS ANGULARJS XML MORE FORUM EXAMPLES REFERENCES

HTML <source> srcset Attribute

❮ HTML <source> tag

Example

A <picture> element with two source files, and a fallback image:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Try it Yourself »

Definition and Usage

The srcset attribute specifies the URL of the image to use in different situations.

This attribute is required when <source> is used in <picture>.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Attribute
srcset 38.0 Yes 38.0 9.1 25.0

Differences Between HTML 4.01 and HTML5

The <source> tag is new in HTML5.

Syntax

<source srcset="URL">

Attribute Values

Value Description
URL Specifies the URL of the image.

Possible values:

  • An absolute URL - points to another web site (like href="http://www.example.com/flower.jpg")
  • A relative URL - points to a file within a web site (like href="flower.jpg")
❮ HTML <source> tag