HTML <img> with srcset Attribute
HTML <img> with srcset Attribute
The srcset attribute specifies an array of possible URL's for an image from which the browser will choose one.
Note: The URL should comprise of any one of the following descriptors:
- A width descriptor - a positive integer directly followed by w.
- A pixel density descriptor - a positive integer directly followed by x.
Using Width Descriptor
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<img srcset="apple.png 750w, orange.png 500w">
</body>
</html>
Attribute Value
You can use any one of the following srcset attributes value, ie) either width or density, but not the both.
| Value | Explanation |
|---|---|
| "img1.png width, img2.png width, ..." | Array of possible URL's for an image. |
| "img1.png density, img2.png density, ..." | Array of possible URL's for an image. |
Using Pixel Density Descriptor
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<body>
<img srcset="apple.png 1x, orange.png 3x">
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.