learning-area
learning-area copied to clipboard
mdn
Responsive Images on Android
Hello!
I tested the responsive.html on my android device and it is downloading the 800px image instead of the 480px. I have done different tests in other scenarios and it also gives the same result. It works properly on desktop.
My device esp: Resolution: 1080x1920 DPR: 2.549999952316284 clientWidth: 424
Yeah you are right, the problem is with the elva-fairy image. I tested using both FF responsive mode, and Chrome responsive mode (from my computer). The one with Chris is loading the 480px width as you can see from the Network tab.
Exactly. Any ideas why this behavior happens with the elva-fairy image? Shouldn't the browser download the 480px wide image instead of the 800px image as it does on desktop mode?
I checked again and now I think it's working as expected. When the browser calculates which image to use, it considers also the DPR - device pixel ratio, not only the available width. Because your DPR is ~ 2.5, the max-width to use the smaller image is not 600px, but 600/2.5 = 240px. Since your device is more than that, it shows the bigger one. You can test all of it from your computer using DevTools responsive mode. DPR of 1 - works as expected:
- 600px - smaller image:
- 601px - bigger one:
Also see this SO answer for more info
I agree that this info about DPR should be mentioned in the tutorial to avoid future confusin. @chrisdavidmills your opinion?
BTW if you no longer believe it's an issue please close it.
Thank you very much for answering!
I tried using a higher max-width (ex: (max-width: 3000px))to see if the problem was related to that, but it always showed the 800px image. Then, I tried by reducing the length used if the media query was fullfilled (ex: (max-width: 480px) 240px) that seemed to work with a 2.0 DPR. The problem is that I can't use the custom width I want on both mobile and desktop and the other problem is that in the 2.0 DPR example I can't use a width higher than 309. If I use a (max-width: 480px) 310px it no longer uses the 480px image in any resolution.
DPR 2.0 using (max-width: 480px) 309px - works as expected:
480px - downloading elva-fairy-480w
481px - downloading elva-fairy-800w
DPR 2.0 using (max-width: 480px) 310px - not working as expected
200px - downloading elva-fairy-800w
I don't know if it exist a better approach to make it work the same on both mobile and desktop, or if I'm missing something.
Full example:
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 480px) 309px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
I still think there is no bug. Try asking on SO so people can guide you where is your wrong assumption.
I don't think it's a bug either, but I can't understand the behavior with other DPRs. Thanks again for your help, I will try on SO. Should I close this issue?
You can wait until another one will step in to answer. It seems that the 309/310 settings are the browser threshold for these image widths for DPR 2. If you will find more useful info on SO you can link to that thread and then close it.
@Riczerq any update on this? On FF 309px behaves the same as 310px (using always 800px)
Hi @avivmu ! No one has answered the question on SO yet. As soon as I find something or get an answer I will post it here.
