HTML picture or srcset for responsive images
As of 2022, both picture and srcset are compatible with all modern browsers. However, if an older browser doesn't understand the <picture> element, it will gracefully fall back to the <img> element inside of it. If an older browser doesn't understand <img srcset...> it will fall back to using the src attribute of the image.
The <picture> element (and <source> sub-elements) are the heavy guns you bring in when you want to do art direction on different sizes / aspect ratios of the image. The img srcset attribute is much more lightweight and is all you need if you want to design for different resolution displays.
Because both are widely supported, I would not worry too much about which one you use. If you're only designing for pixel density, I would recommend srcset because it's more lightweight.
How to use srcset image attribute?
According to the w3c, the srcset attribute is still in draft status. That means that it is not yet recommended to use it because the specification can still change and web browsers are not expected to implement it already.
The scrset attribute is now supported by most browsers. But low-bandwidth and high-bandwidth are not part of the specification. Likely because it's hard to find an objective definition of "low" and "high" bandwidth which will still be reasonable in ten years. So you can not expect these to have any effect at all.
Why are the srcset and sizes attributes in the img element not working the way they should?
Your code is not working because your code is incorrect because if you wanna put srcset attribute then you have to put it inside source tag which should be inside picture tag tag. Try writing the code attached below.
<!DOCTYPE html>
<html>
<head>
<title>srecset attribute</title>
</head>
<body>
<picture>
<source media="(min-width:800px)" srcset="mycat.jpg">
<source media="(min-width:600px)" srcset="coffee.jpg">
<img src="orange.jpg" alt="orange" style="width:auto;">
</picture>
</body>
</html>Related Topics
Aligning to The Bottom in Flexbox
Why Certain Doctype Declarations Cause 100%-Height Tables and Divs to Stop Working
How to Make Bootstrap 4 Columns All The Same Height
Stop Lastpass Filling Out a Form
Positioning Text Over Image (HTML,CSS)
How to Achieve a Text Loading Animation Over Multiple Lines
CSS Sprites and Repeating Backgrounds
How to Prevent Browser from Caching Form Fields
Load a Low-Res Background Image First, Then a High-Res One
Angular4 - Scrolling to Anchor
How Organize Pagination with a Large Number of Pages in Django Project
Bootstrap 4 Order Masonry-Like Column Cards Horizontal Instead of Vertical
How to Remove Only Underline from A:Before
How to Create Curved & Overlapping Menu Tabs in CSS