HTML `<picture>` element not displaying fallback image in older browsers as expected
I'm testing a new approach and I'm not sure how to approach I've been struggling with this for a few days now and could really use some help. I've encountered a strange issue with I'm trying to implement a responsive image solution using the `<picture>` element for a project, but I'm working with an scenario where the fallback image does not load in older browsers like IE11... Here's the structure I'm using: ```html <picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-medium.jpg" media="(min-width: 500px)"> <img src="image-fallback.jpg" alt="My Image"> </picture> ``` In modern browsers, this works perfectly, showing the appropriate images based on the media queries. However, when I test on IE11, even though it supports the `<img>` element, it completely ignores the `<source>` tags and doesn’t display the `image-fallback.jpg`. Instead, it leaves an empty space where the image should be, and I see no errors in the console. I've tried clearing the cache and ensuring that all images are accessible, but the behavior remains consistent. I've also attempted using `<!--[if !IE]><!-->` comments to hide the `<picture>`, but that leads to the image not being displayed at all in modern browsers. Is there a workaround for ensuring the fallback image displays in IE11 while still taking advantage of the `<picture>` element in other browsers? Any insights or suggestions would be greatly appreciated! I appreciate any insights! I'm on Debian using the latest version of Html. Could someone point me to the right documentation? I've been using Html for about a year now.