CodexBloom - Programming Q&A Platform

HTML5 `<picture>` element not providing fallback image in IE11

đź‘€ Views: 63 đź’¬ Answers: 1 đź“… Created: 2025-08-29
html internet-explorer html5 HTML

I've tried everything I can think of but I'm using the `<picture>` element to serve different images based on screen size, which works perfectly in modern browsers... However, I'm working with an scenario in Internet Explorer 11 where it seems to ignore the fallback image specified in the `<source>` elements. Here’s a simplified version of my code: ```html <picture> <source media="(min-width: 800px)" srcset="large.jpg"> <source media="(min-width: 400px)" srcset="medium.jpg"> <img src="fallback.jpg" alt="Fallback image"> </picture> ``` When viewing the webpage in IE11, the fallback image (fallback.jpg) doesn’t load at all, even when the media queries in the `<source>` elements do not match. I have ensured that `fallback.jpg` is correctly located and accessible. I’ve also tried adding the `src` attribute to the `<img>` tag as a direct source, which should load the fallback image by default. However, the image still fails to render in IE11. I’ve checked the console for any errors, but there’s nothing indicating why the image wouldn’t load. I'm aware that IE11 has limited support for newer HTML5 features, but I assumed this would still work as a basic fallback. Is there a known scenario with the `<picture>` element in IE11, or is there something I might be missing in my implementation? Any advice on how to ensure the fallback works properly in IE11 would be greatly appreciated! Thanks in advance! The stack includes Html and several other technologies. This is my first time working with Html 3.10. What's the correct way to implement this?