👀 Views: 39 💬 Answers: 1 📅 Created: 2025-06-21

html responsive-images css HTML

Quick question that's been bugging me - I tried several approaches but none seem to work... I've been trying to implement responsive images using the `<picture>` element to serve different image sources based on screen size. My goal is to optimize the loading experience on mobile devices, but I noticed that when testing on smaller screens, the fallback `<img>` source is sometimes not loading correctly. Here's the code I'm currently using: ```html <picture> <source media="(max-width: 600px)" srcset="small-image.jpg"> <source media="(max-width: 1200px)" srcset="medium-image.jpg"> <img src="large-image.jpg" alt="Descriptive text"> </picture> ``` When I reduce the browser width to below 600px, the mobile image should load, but sometimes the large image shows instead, which seems to ignore the media queries. I'm using Chrome 95 and iOS Safari 15 for my testing. I also checked the console for any errors and didn't find anything unusual, but I did notice that sometimes the `<source>` tags are not being evaluated properly. I tried adding `sizes` attributes to the `<source>` elements in case it needed more information for choosing the right images: ```html <picture> <source media="(max-width: 600px)" srcset="small-image.jpg" sizes="(max-width: 600px) 100vw"> <source media="(max-width: 1200px)" srcset="medium-image.jpg" sizes="(max-width: 1200px) 50vw"> <img src="large-image.jpg" alt="Descriptive text"> </picture> ``` But this hasn't changed much. Is there something I'm missing? Could it be a browser compatibility scenario or something else with how I’m structuring the `<picture>` element? Any insights would be greatly appreciated! I'm working on a application that needs to handle this. What am I doing wrong? I'm on Windows 11 using the latest version of Html. This is part of a larger service I'm building. Is there a simpler solution I'm overlooking?