- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - srcset Attribute
HTML srcset attribute is used to specify the URL of an image to use in different situations like smaller screen devices.
In other words, we can say that the scrset attribute is useful to represent the different images, which depend on different screen sizes. If we wants to render different images based on the screen sizes of the devices we can use this tag.
Syntax
<tag srcset="URL">
Where, "URL" specifies the URL of image.
Applies on
The below-listed elements allow the use of the HTML srcset attribute.
Element | Description |
---|---|
<img> | HTML <img> tag is used to embed image in to the HTML document. |
<source> | HTML <source> tag is an empty element used to define a variety of media resources in different formats, such as audio, video, and images. |
Examples of HTML srcset Attribute
Bellow examples will illustrate the HTML srcset attribute, where and how we should use this attribute!
Using srcset attribute with "source" element
When we run the below code, it will generate an output consisting of the image on the webpage. when the user tries to change the webpage width it displays another image.
<!DOCTYPE html> <html> <head> <title>HTML srcset Attribute</title> </head> <body> <h1 style="color: green;"> Tutorials<span style="color: black">point</span> <h1> <h2>HTML srcset Attribute</h2> <picture> <source media="(min-width:600px)" width="540" height="220" srcset= "https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80"> <source media="(min-width:400px)" width="540" height="220" srcset= "https://images.all-free-download.com/images/graphiclarge/beautiful_nature_landscape_05_hd_picture_166223.jpg"> <img src="https://img.freepik.com/premium-photo/landscape-waterfall_1417-2002.jpg" style="width:auto;"> </picture> </body> </html>
Using srcset attribute with "img" element
When we run the below code, it will generate an output consisting of the image on the webpage. when the user tries to change the webpage width it displays the same image with different sizes provided in the sizes attribute.
<!DOCTYPE html> <html> <head> <title>HTML srcset Attribute</title> </head> <body> <h1 style="color: green;"> Tutorials <span style="color: black">point</span> </h1> <h2>HTML srcset Attribute</h2> <img srcset= "https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 100w, https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 300w, https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 600w" sizes="(max-width: 710px) 100px, (max-width: 991px) 300px, 600px"> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
srcset | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
To Continue Learning Please Login
Login with Google