Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App
Next Article:
HTML <source> type Attribute
Next article icon

HTML | <source> srcset Attribute

Last Updated : 19 Jul, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML srcset attribute is used to specifies the URL of an image to use in different situations. when <source> is used in <picture> it is required
Syntax: 
 

<source srcset="URL">

Attribute Values 
 

  • URL: It specifies the URL of image

Example: 
 

html




<!DOCTYPE html>
 
<html>
 
<head>
 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
</head>
 
<body>
 
    <picture>
 
        <source media="(min-width: 600px)"
                srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28-300x83.png">
 
        <source media="(min-width: 400px)"
                srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350-300x300.png">
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190521140445/gfglogo2.png"
             style="width:auto;">
 
    </picture>
 
</body>
 
</html>
 
 

Output: change the size of browser 
 

 

 

Supported Browsers:The browsers supported by HTML srcset Attribute are listed below 
 

  • Google Chrome 38
  • Firefox 38
  • Apple Safari 9
  • Opera 25
  • Edge 18

 


Next Article
HTML <source> type Attribute

S

shubham_singh
Improve
Article Tags :
  • HTML
  • Web Technologies
  • HTML-Attributes

Similar Reads

    HTML Audio Element Attributes

    • HTML <audio> autoplay Attribute
      The HTML <audio> autoplay attribute is used to specify that the audio should automatically start playing as soon as it is loaded. It is a Boolean attribute.  Note: Autoplay is not allowed in most cases on Chromium browsers. However, it is allowed when muted. Syntax: <audio autoplay>Examp
      1 min read

    • HTML | <audio> controls Attribute
      The HTML <audio> controls attribute is used to specify the control to play audio. It is the Boolean value. This attribute is new in HTML5. The audio control attribute contains the following property: PlayPauseSeekingVolume Syntax: <audio controls> Example: C/C++ Code &lt;!DOCTYPE htm
      1 min read

    • HTML <audio> crossorigin Attribute
      The HTML crossorigin Attribute is used in the <audio> element that supports a CORS request when we tried to fetch out the audio files from the third-party servers or from another domain.  Syntax: <audio crossorigin="anonymous | use-credentials">Attribute Values: anonymous: It has a Defau
      1 min read

    • HTML | <audio> loop Attribute
      The HTML <audio> loop Attribute is used to restart the audio again and again after loading the web page. It contains the Boolean value. This tag is new in HTML 5. Syntax: <audio loop> Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;titl
      1 min read

    • HTML | <audio> preload Attribute
      The HTML audio preload Attribute is used to specify the way the author thinks the audio should be loaded when the page loads. The audio preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented. Syntax: <audio preload="auto
      1 min read

    • HTML | <audio> src Attribute
      The HTML <audio> src attribute is used to specify the URL of the audio files. We should use the Mp3 file for play the audio in the Internet Explorer and Safari Browsers. The source element can be used to add audio files to a webpage to work in all the Browsers. Syntax: <audio src="URL">
      1 min read

    HTML Video Element Attributes

    • HTML <video> autoplay Attribute
      HTML <video> autoplay attribute is used to specify that the video will play automatically after loading the web page. It is the Boolean value, this attribute is new in HTML5.  Syntax: <video src="" autoplay>HTML <video> autoplay attribute ExamplesExample: Here is the basic implemen
      2 min read

    • HTML | <video> controls Attribute
      The HTML <video> controls Attribute is used to specify the control to play video. It is the Boolean value. This attribute is new in HTML5. The video control should include: PlayPauseVolumeFull-screen ModeSeekingCaptions/Subtitles(if available)Track(if available) Syntax: <video controls>
      1 min read

    • HTML <video> crossorigin Attribute
      The HTML crossorigin attribute is used in the <video> element that supports a CORS request when we tried to fetch out the video files from the third-party servers or from another domain. Syntax: <video crossorigin="anonymous | use-credentials"> Attribute Values: anonymous: It has a defau
      1 min read

    • HTML | <video> height Attribute
      The HTML <video> height attribute is used to specify the height of the video player in terms of pixels. Syntax: <video height="pixels"> Attribute Values: It contains single value pixels which specifies the height of the video player in terms of pixels. Below example illustrates the use o
      1 min read

    • HTML video loop Attribute
      The HTML <video> loop Attribute is used to restart the video again and again after finishing it. It contains the Boolean value. The loop attribute is a boolean value. Syntax:<video loop>Example: This example shows the use of the HTML video loop attribute. [GFGTABS] html <!DOCTYPE html
      1 min read

    • HTML | <video> muted Attribute
      The HTML <video> muted Attribute is used to specify the audio output of the video is muted, it is a Boolean attribute. Syntax: <video muted> Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; HTML Video muted Attribute &l
      1 min read

    • HTML | <video> poster Attribute
      The HTML <video> poster Attribute is used to display the image while video downloading or when user click the play button. If this image not set then it will take the first frame of video as a poster image. Syntax: <video poster="URL"> Attribute Values: It contains a single value URL whi
      1 min read

    • HTML | <video> preload Attribute
      The HTML audio preload Attribute is used to specify the way the author thinks the video should be loaded when the page loads. The video preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented. Syntax: <video preload="auto
      1 min read

    • HTML | <video> src Attribute
      The HTML <video> src Attribute is used to specify the URL of the video file. This attribute uses Ogg file on Firefox, Opera and Chrome browsers and MPEG4 file on Internet Explorer and Safari browsers. This attribute is new in HTML5. Syntax: <video src="URL"> Attribute Values: It contains
      1 min read

    • HTML <video> width Attribute
      HTML <video> width Attribute is used to specify the width of the video display area in pixels of its container element's width. Note: Always specify the width and the height of the video else the web page will be confused about how much space that video will require due to that reason web page
      1 min read

    HTML Img Element Attributes

    • HTML <img> align Attribute
      The HTML <img> align attribute sets an image’s alignment relative to surrounding elements, allowing horizontal or vertical positioning. It is deprecated in HTML5 and replaced by CSS properties like float and vertical alignment for more flexible and modern alignment options. Note: The align att
      5 min read

    • HTML img alt Attribute
      The <img> alt attribute is used to specify alternative text for an image. This attribute is particularly useful when the image cannot be displayed, either due to a broken link or when users rely on screen readers. Syntax<img src="image.jpg" alt="text">Attribute ValuesThe alt attribute co
      1 min read

    • HTML | <img> border Attribute
      The <img> border attribute is used to specify the border width around the image. The default value of <img> border attribute is 0. It is not supported by HTML 5. Use CSS instead of this attribute. Syntax: <img border="pixels"> Attribute Values: It contains single value pixels which
      1 min read

    HTML Canvas Element Attributes

    • HTML <canvas> height Attribute
      The HTML <canvas> height Attribute is used to specify the height of the <canvas> element in terms of pixels. Syntax: <canvas height="pixels"> Attribute Values: It contains single value pixels which specify the height of the canvas in terms of pixel. It has a Default value which is
      1 min read

    • HTML <canvas> width Attribute
      The HTML <canvas> width Attribute is used to specify the width of the <canvas> in terms of pixels. Syntax: <canvas width="pixels"> Attribute Values: It contains the value i.e pixels which specify the width of the canvas in terms of pixel. It has a Default value which is 300. Exampl
      1 min read

    HTML Embed Element Attributes

    • HTML | <embed> height Attribute
      The HTML <embed> height attribute is used to specify the height of the embedded content. Syntax: <embed height = "pixels"> Attribute Values: pixels: The width value are set in terms of pixels. It is used to specify the height of embedded content. Example: C/C++ Code &lt;!DOCTYPE html
      1 min read

    • HTML | <embed> src Attribute
      The HTML <embed> src Attribute is used to specify the web address of the embedded content. Syntax: <embed src="URL"> Attribute Values: URL: It is used to specify the web address of the embedded content.An absolute URL: It points to another webpage.A relative URL: it points to a file with
      1 min read

    • HTML | <embed> type Attribute
      The HTML embed type Attribute contains the media_type content. It is used to specify the media type of the embedded content. Syntax: <embed type="media_type"> Attribute Values: media_type: It contains the media_type content. It is used to specify the media type of the embedded content. Example
      1 min read

    • HTML | <embed> width Attribute
      The HTML embed width attribute is used to specify the width of the embedded content. Syntax: <embed width="pixels"> Attribute Values: pixels: The width of embed value are set in terms of pixels. It is used to specify the width of embedded content. Example: C/C++ Code &lt;!DOCTYPE html&
      1 min read

    HTML Object Element Attributes

    • HTML | <object> align Attribute
      The HTML <object> align Attribute is used to specify an alignment for an object Element. It is an inline element means that can not insert a new line on a page. The text and other elements can also wrap around it. Note: This attribute is not supported by HTML5. Syntax: <object align="left |
      1 min read

    • HTML | <object> data Attribute
      The <object> data Attribute in HTML is used to specify the URL of the Embedded file of an Object. Syntax: <object data="URL"> Attribute Values: It contains single value URL which is used to specify the source of the object. The possible value of URL are: absolute URL: It points to anothe
      1 min read

    • HTML | <object> form Attribute
      The HTML <object> form Attribute is used to specify the one or more forms that the <object> Element belongs to. Syntax: <object form="form_id"> Attribute Values: form_id: It is used to specify the <form> elements that the <object> element belongs to . The value of this
      1 min read

    • HTML | <object> height Attribute
      The HTML <object> height attribute is used to specify the height of the object element in terms of pixel. Syntax: <object height="pixels"> Attribute Values: pixels: It holds the height of the object in terms of pixels. Below example illustrates the <object> height attribute in HTML
      1 min read

    • HTML <object> hspace Attribute
      The HTML <object> hspace Attribute is used to specify the number of whitespaces on the left and the right side of the object.  Syntax: <object hspace="pixels"> Attribute Value: pixels: It specifies the number of whitespaces in terms of pixels.Note: The <object> hspace Attribute is
      2 min read

    • HTML | <object> name Attribute
      The HTML <object> name Attribute is used to specify the name of the embedded file. This attribute is also used as a reference for an object element in the Javascript. Syntax: <object name="name"> Attribute Values: name: It specify the name of the embedded file. Example: C/C++ Code &l
      1 min read

    • HTML | <object> type Attribute
      The HTML <object> type Attribute is used to specify the Internet type of MIME type of the Object. Syntax: <object type="media_type"> Attribute Values media_type It is used to specify the Internet media type of the embedded file. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;h
      1 min read

    • HTML | object usemap Attribute
      The HTML usemap attribute is used to specify the name of an image-map to use with the object. The image with some clickable areas is called image-map. The usemap attribute is related to associate degree element’s name attribute and creates a relationship between the thing and also the map. Syntax:
      1 min read

    • HTML <object> vspace Attribute
      The HTML <object> vspace Attribute is used to specify the number of whitespace on the bottom and top side of an object.Syntax: <object vspace="pixels"> Attribute: pixels: It specifies the number of whitespaces on the top and bottom of an object in terms of pixels. Note: The <object
      1 min read

    • HTML <object> width Attribute
      The HTML <object> width attribute is used to specify the horizontal dimension of the embedded object, defining the width of the displayed content within the webpage. Syntax: <object width="pixels">Attribute Values: pixels: It holds the width of the object in terms of pixels.The below exa
      1 min read

    HTML Source Element Attributes

    • HTML | <source> media Attribute
      The HTML source media attribute accepts any valid media query that would normally be defined in a CSS. This attribute can accept several values. Syntax: <source media="media_query"> Possible Operators: Value Description and AND operator not NOT operator , OR operator Devices: Value Description
      2 min read

    • HTML | <source> src Attribute
      The HTML <source> src attribute is used to specify the URL of the media resource. The source element is used as a child element of the <audio> and <video> element. Syntax: <source src="URL"> Attribute Values: It contains single value URL which specifies the URL of the media r
      1 min read

    • HTML | <source> srcset Attribute
      The HTML srcset attribute is used to specifies the URL of an image to use in different situations. when <source> is used in <picture> it is requiredSyntax: <source srcset="URL"> Attribute Values URL: It specifies the URL of image Example: C/C++ Code <!DOCTYPE html> <html
      1 min read

    • HTML <source> type Attribute
      The HTML <source> type attribute is used to specify the MIME type of the media resource.Syntax: <source type="media_type"> Attribute Values: It contains single value MIME_type which specifies the MIME_type of the media resource. Few MIME types are video/ogg, videomp4, audio/ogg etc.Examp
      1 min read

    HTML Track Element Attributes

    • HTML | <track> default Attribute
      The HTML <track> default Attribute is a Boolean attribute. This attribute is used to specify that the track will be enabled if the user's preferences do not indicate that another track would be more appropriate. Note: With a default attribute, there must not be more than one track element per
      1 min read

    • HTML | <track> label Attribute
      The HTML <track> label Attribute is used to specify the label of the text track. Syntax: <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> Attribute Values: label: It specify the label of the text track. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt
      1 min read

    • HTML | <track> src Attribute
      The HTML <track> src Attribute is used to specify the URL of the track. Syntax: <track src="subtitles_en.vtt"> Attribute Values: It contains single value URL which is used to specify the URL of the track. Below example illustrates the use of src attribute in <track> element. Exampl
      1 min read

    • HTML <track> srclang Attribute
      The HTML <track> element's srclang attribute specifies the language of the text track's data. It is used in <track> elements within <video> or <audio> tags, defining the language of subtitles, captions, or other track content using language codes like "en" for English. Note:
      2 min read

    HTML Iframe Element Attributes

    • HTML <iframe> align Attribute
      The HTML <iframe> align attribute is used to specify the alignment of the inline-frame according to the alternate element. Syntax <iframe align="left|right|middle|top|bottom">Attribute Values left: It sets the alignment of an iframe to left.right: It sets the alignment of an iframe to ri
      1 min read

    • HTML | <Iframe> frameborder Attribute
      The HTML Iframe frameborder Attribute is used to specify whether or not to display the border around the content of an <Iframe> Element. Syntax: <iframe frameborder="1 | 0"> Attribute Values: 0: It has a Default value. It sets the border on one state. 1: It sets the border on-off state.
      1 min read

    • HTML | <iframe> height Attribute
      The HTML <iframe> height attribute is used to specify the height of the <iframe> in terms of pixels. Syntax: <iframe height="pixels"> Attribute Values: It contains single value pixel which specifies the height of the iframes in terms of pixels. Below example illustrates the use of
      1 min read

geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences