"> " />
Easy Tutorial
❮ Tag Img Att Legend Align ❯

HTML <source> srcset Attribute

HTML <source> Tag

Example

Using <source> within the <picture> tag to set images for different screen displays:

<picture>
  <source media="(min-width:650px)" srcset="https://static.tutorialpro.org/images/tutorialpro-logo.png">
  <source media="(min-width:465px)" srcset="https://static.tutorialpro.org/images/code-icon-script.png">
  <img decoding="async" src="https://static.tutorialpro.org/images/mix/hjkg_icon.png" style="width:auto;">
</picture>

Browser Support

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

Attribute
srcset 38.0 13.0 38.0 9.1 25.0

Definition and Usage

The srcset attribute is used for specifying image URLs for different situations.

This attribute is required when <source> is used within the <picture> tag.


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 media file. Possible values: Absolute URL - Points to another website (e.g., href="https://www.tutorialpro.org/horse.ogg")<br>Relative URL - Points to a file within the website (e.g., href="horse.ogg")

❮ Tag Img Att Legend Align ❯