HTML <source> srcset Attribute

The <source> element srcset attribute with <picture> element:

Example

<picture>
  <source media="(min-width:650px)" srcset="computer.png">
  <source media="(min-width:465px)" srcset="clock.png">
  <img src="mobile.png" alt="mobile" style="width:auto;">
</picture>

Try this code ❯

Meaning

The srcset attribute required if the source element's parent is a <picture> element, but not allowed if the source element's parent is an <audio> or <video> element.

A list of one or more strings, separated by commas, indicating a set of possible images represented by the source for the browser to use.

Standard Syntax

<source srcset="URL, width, pixel">

Attribute Values

Value	Description
URL	One URL specifying an image. Value can be: An absolute URL - file within or another web site ( href="http://www.example.com/index.html") A relative URL - file to within a web site ( href="index.html")
width	A width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. The default value, if missing, is the infinity.
pixel	A pixel density descriptor, that is a positive floating number directly followed by "x". The default value, if missing, is 1x.

Value

Description

URL

One URL specifying an image.

Value can be:

An absolute URL - file within or another web site ( href="http://www.example.com/index.html")
A relative URL - file to within a web site ( href="index.html")

width

A width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. The default value, if missing, is the infinity.

pixel

A pixel density descriptor, that is a positive floating number directly followed by "x". The default value, if missing, is 1x.