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

Related Articles
HTML accept Attribute HTML Input HTML Attribute
HTML accept-charset Attribute HTML Attribute
HTML accesskey Attribute HTML Attribute
HTML action Attribute HTML Attribute
HTML alt Attribute HTML Attribute
HTML async Attribute HTML Attribute
HTML autocomplete Attribute in HTML HTML Attribute
HTML autofocus Attribute HTML Attribute
HTML autoplay Attribute HTML Attribute
HTML charset Attribute HTML Attribute
HTML checked Attribute HTML Attribute
HTML cite Attribute HTML Attribute
HTML class Attribute HTML Attribute
HTML cols Attribute HTML Attribute
HTML colspan Attribute HTML Attribute
HTML content Attribute HTML Attribute
HTML contenteditable Attribute HTML Attribute
HTML controls Attribute HTML Attribute
HTML coords Attribute HTML Attribute
HTML data Attribute HTML Attribute
HTML data-* Attribute HTML Attribute
HTML datetime Attribute HTML Attribute
HTML controls Attribute HTML Attribute
HTML default Attribute HTML Attribute
HTML defer Attribute HTML Attribute
HTML dir Attribute HTML Attribute
HTML dirname Attribute HTML Attribute
HTML disabled Attribute HTML Attribute
HTML download Attribute HTML Attribute
HTML draggable Attribute HTML Attribute
HTML enctype Attribute HTML Attribute
HTML enterkeyhint Attribute HTML Attribute
HTML for Attribute HTML Attribute
HTML form Attribute HTML Attribute
HTML formaction Attribute HTML Attribute
HTML headers Attribute HTML Attribute
HTML height Attribute HTML Attribute
HTML hidden Attribute HTML Attribute
HTML high Attribute HTML Attribute
HTML href Attribute HTML Attribute
HTML hreflang Attribute HTML Attribute
HTML http-equiv Attribute HTML Attribute
HTML id Attribute HTML Attribute
HTML inert Attribute HTML Attribute
HTML inputmode Attribute HTML Attribute
HTML ismap Attribute HTML Attribute
HTML kind Attribute HTML Attribute
HTML label Attribute HTML Attribute
HTML lang Attribute HTML Attribute
HTML list Attribute HTML Attribute
HTML loop Attribute HTML Attribute
HTML low Attribute HTML Attribute
HTML max Attribute HTML Attribute
HTML maxlength Attribute HTML Attribute
HTML media Attribute HTML Attribute
HTML method Attribute HTML Attribute
HTML min Attribute HTML Attribute
HTML multiple Attribute HTML Attribute
HTML muted Attribute HTML Attribute
HTML name Attribute HTML Attribute
HTML novalidate Attribute HTML Attribute
HTML onabort Attribute HTML Attribute
HTML onafterprint Attribute HTML Attribute
HTML onbeforeprint Attribute HTML Attribute
HTML onbeforeunload Attribute HTML Attribute
HTML onblur Attribute HTML Attribute
HTML oncanplay Attribute HTML Attribute
HTML oncanplaythrough Attribute HTML Attribute
HTML onchange Attribute HTML Attribute
HTML onclick Attribute HTML Attribute
HTML oncontextmenu Attribute HTML Attribute
HTML oncopy Attribute HTML Attribute
HTML oncuechange Attribute HTML Attribute
HTML oncut Attribute HTML Attribute
HTML ondblclick Attribute HTML Attribute
HTML ondrag Attribute HTML Attribute
HTML ondragend Attribute HTML Attribute
HTML ondragenter Attribute HTML Attribute
HTML ondragleave Attribute HTML Attribute
HTML ondragover Attribute HTML Attribute
How to add HTML ondragstart Attribute HTML Attribute
HTML ondrop Attribute HTML Attribute
HTML ondurationchange Attribute HTML Attribute
HTML onemptied Attribute HTML Attribute
HTML onended Attribute HTML Attribute
HTML onerror Attribute HTML Attribute
HTML onfocus Attribute HTML Attribute
HTML onhashchange Attribute HTML Attribute
HTML oninput Attribute HTML Attribute
HTML oninvalid Attribute HTML Attribute
HTML onkeydown Attribute HTML Attribute
HTML onkeypress Attribute HTML Attribute
HTML onkeyup Attribute HTML Attribute
HTML onload Attribute HTML Attribute
HTML onloadeddata Attribute HTML Attribute
HTML onloadedmetadata Attribute HTML Attribute
HTML onloadstart Attribute HTML Attribute
HTML onmousedown Attribute HTML Attribute
HTML onmousemove Attribute HTML Attribute
HTML onmouseout Attribute HTML Attribute
HTML onmouseover Attribute HTML Attribute
HTML onmouseup Attribute HTML Attribute
HTML onmousewheel Attribute HTML Attribute
HTML onoffline Attribute HTML Attribute
HTML ononline Attribute HTML Attribute
HTML onpageshow Attribute HTML Attribute
HTML onpaste Attribute HTML Attribute
HTML onpause Attribute HTML Attribute
HTML onplay Attribute HTML Attribute
HTML onplaying Attribute HTML Attribute
HTML onprogress Attribute HTML Attribute
HTML onratechange Attribute HTML Attribute
HTML onreset Attribute HTML Attribute
HTML onresize Attribute HTML Attribute
HTML onscroll Attribute HTML Attribute
HTML onsearch Attribute HTML Attribute
HTML onseeked Attribute HTML Attribute
HTML onseeking Attribute HTML Attribute
HTML onstalled Attribute HTML Attribute
HTML onsubmit Attribute HTML Attribute
HTML onsuspend Attribute HTML Attribute
HTML ontimeupdate Attribute HTML Attribute
HTML ontoggle Attribute HTML Attribute
HTML onunload Attribute HTML Attribute
HTML onvolumechange Attribute HTML Attribute
HTML onwaiting Attribute HTML Attribute
HTML onwheel Attribute HTML Attribute
HTML open Attribute HTML Attribute
HTML optimum Attribute HTML Attribute
HTML pattern Attribute HTML Attribute
HTML placeholder Attribute HTML Attribute
HTML popover Attribute HTML Attribute
HTML popovertarget Attribute HTML Attribute
HTML popovertargetaction Attribute HTML Attribute
HTML poster Attribute HTML Attribute
HTML preload Attribute HTML Attribute
HTML readonly Attribute HTML Attribute
HTML rel Attribute HTML Attribute
HTML required Attribute HTML Attribute
HTML reversed Attribute HTML Attribute
HTML rows Attribute HTML Attribute
HTML rowspan Attribute HTML Attribute
HTML sandbox Attribute HTML Attribute
HTML scope Attribute HTML Attribute
HTML selected Attribute HTML Attribute
HTML shape Attribute HTML Attribute
HTML size Attribute HTML Attribute
HTML sizes Attribute HTML Attribute
HTML span Attribute HTML Attribute
HTML spellcheck Attribute HTML Attribute
HTML src Attribute HTML Attribute
HTML srcdoc Attribute HTML Attribute
HTML srclang Attribute HTML Attribute
HTML <source> srcset Attribute HTML Attribute
HTML start Attribute HTML Attribute
HTML step Attribute HTML Attribute
HTML style Attribute HTML Attribute
HTML tabindex Attribute HTML Attribute
HTML target Attribute HTML Attribute
HTML title Attribute HTML Attribute
HTML translate Attribute HTML Attribute
HTML type Attribute HTML Attribute
HTML usemap Attribute HTML Attribute
HTML value Attribute HTML Attribute
HTML width Attribute HTML Attribute
HTML wrap Attribute HTML Attribute

Single Articles
How to add HTML <source> srcset Attribute HTML Attribute

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

Read Article

https://horje.com/learn/1434/reference

 

Horje