CodexBloom - Programming Q&A Platform

HTML <img> with srcset Attribute Not Displaying Correct Image on Retina Displays in Firefox

👀 Views: 1 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-10
html firefox srcset responsive-images HTML

I'm building a feature where I tried several approaches but none seem to work. I'm working with an scenario where my `<img>` elements using the `srcset` attribute are not displaying the correct image on Retina displays in Firefox (version 94). While they work fine in Chrome and Safari, Firefox seems to default to the smallest image source regardless of the device's pixel density. Here's the code I'm using: ```html <img src="image-1x.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="Example Image"> ``` I've ensured that all images have the correct sizes and aspect ratios. However, on my MacBook Pro with Retina display, the `<img>` still renders the `image-1x.jpg` instead of the higher resolution images. To troubleshoot, I tried clearing the cache, and I even used Firefox's DevTools to simulate different devices, but the question continues. The `srcset` attribute seems to be ignored entirely. Is there something I'm missing in the implementation, or could this be a bug specific to Firefox? Any insights or workarounds would be greatly appreciated! This is part of a larger API I'm building. Thanks in advance! What are your experiences with this?