Horje
HTML <source> srcset Attribute

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.

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")

How to add HTML <source> srcset Attribute

A <picture> element with two source files, and a fallback image.
index.html
Example: HTML 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture>
  <source media="(min-width:650px)" srcset="https://horje.com/avatar.png">
  <source media="(min-width:465px)" srcset="https://horje.com/avatar.png">
  <img src="https://horje.com/avatar.png" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Output should be:

How to add HTML <source> srcset Attribute


html <source> srcset attribute

Type:
 Develop
Category:
 Web Tutorial
Sub Category:
 HTML Attribute
Uploaded by:
 Admin

Read Article
https://develop.horje.com/learn/1434/reference

 

Horje