HTML <source> srcset Attributes

HTML source 标签参考手册HTML <source> Tag

Examples

Use <source> inside <picture> to set images displayed on different screens:

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

Try it Yourself »

Browser Support

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

Attribute
srcset 38.0 13.0  38.0 9.1 25.0

Definition and Usage

The srcset attribute is used to specify the URL of the image to be displayed under different circumstances.

This attribute is required when <source> is applied to 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 (like href="../horse.ogg.html")
  • Relative URL - points to a file within the website (like href="horse.ogg.html")

HTML source 标签参考手册HTML <source> Tag Other Extensions