CodexBloom - Programming Q&A Platform

HTML `<picture>` Element Not Fallbacking Correctly in IE 11 for Webp Images

👀 Views: 204 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-14
html webp ie11 HTML

I've been struggling with this for a few days now and could really use some help... I'm trying to configure I tried several approaches but none seem to work... I've been struggling with this for a few days now and could really use some help. I'm having trouble with the `<picture>` element not properly falling back to a default image in Internet Explorer 11 when the WebP format is not supported. I have a simple setup where I want to serve a WebP image if the browser supports it, and a JPEG alternative otherwise. Here's my current code: ```html <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Description of image"> </picture> ``` In modern browsers, this works beautifully. However, when I test in IE 11, the image simply does not display at all, and I see a broken image icon instead. I've checked the console and there are no behavior messages, which is puzzling. I have also tried using the `src` attribute directly on the `<img>` tag as a fallback, but it doesn't work either. This is how it looks: ```html <img src="image.jpg" alt="Description of image" srcset="image.webp" type="image/webp"> ``` I've confirmed that `image.jpg` is accessible and displays correctly when I navigate directly to it. I understand that IE 11 has limited support for modern HTML features, but is there a known workaround or fix for this scenario? Any insights would be greatly appreciated, as I want to ensure a smooth experience for users on older browsers. My development environment is Ubuntu. How would you solve this? This is part of a larger application I'm building. This is part of a larger CLI tool I'm building. I'm open to any suggestions. I'm using Html 3.10 in this project.