Macbook pro issue with img srcset/sizes example in mdn docs

MDN
1

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

I tried this example on the macbook chrome browser , but the browser always displays
elva-fairy-800w.jpg image irrespective of viewport width. even at 500*787 viewport size ,
the image displayed is the “elva-fairy-800w.jpg” . It never switches to
elva-fairy-480w.jpg below viewport width of 600px.

I checked the macbook pro device pixel ratio , and it is “2” .
Can you mention because of this , browser never chooses the smaller resolution image ?

2

Hello @mavpks

that how chrome behave when you load your website in larger window size it load the bigger one which is expected but if you resize it after that it will still load the bigger one and just resize it you can say it save the bandwidth thanks to @chrisdavidmills who teach us that

to make sure your code is right clear your cache and open new window in smaller size then then open your page on that small window it will load the smaller one then resize it to bigger it will load the bigger one

or use picture element and chrome will behave it self and do what you need :wink:

by the way firefox will load the correct image

hope that help and have a nice day :slight_smile:

1 Like
3

even after clearing cache , i dont see the smaller image getting loaded in new window.
i am using a macbook pro with devicepixelratio of 2 .

4

could you share your code on any online service

5

i just tried this example on macbook pro https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/responsive.html

6

it work fine here 2 think you can try:

  1. clear cache for longer tie period
  2. create new browser profile and try on that new profile

do not forget to make the window small before load it

7

Hi @mavpks and welcome to the community :wave:

The scrset and sizes attributes of <img> can be seen as hints for the browser. It’s possible that Chrome decides to use the larger image regardless of the small viewport size because of the higher pixel density. In my understanding this shouldn’t be the case for the <picture> element.

So my questions are:

I hope this gives you some hints to test the behavior and I’m interested in your findings. Unfortunately I never got my hands on a high density display to test it myself.

Have a nice day,
Michael

1 Like
8

<picture> example works fine . Tried it on both macbook(dpxl-2) and hp laptop(dpxl-1).
however the image srcset example works the same way as mentioned earlier in safari.
meaning even when the browser viewport width is as small as 240px , safari chooses the image with 800px resolution.

I resized the browser window when testing all of this .
I tried modifying the code as below to experiment a bit more :
<img
srcset="
…/images/elva-fairy-480w.jpg 480w,
…/images/elva-fairy-800w.jpg 800w
"
sizes="(max-width: 600px) 50vw,
800px"
src="…images/elva-fairy-800w.jpg"
alt=“Elva dressed as a fairy”
/>

i do see that when browser window width is <= 600px , with the above change in image element slot reduced to 50vw , now it selects the smaller resolution image elva-fairy-480w.jpg. I tried this both in chrome/safari.

1 Like
9

Thank you for your valuable feedback :+1:
It seems this supports my initial statement about

The scrset and sizes attributes of <img> can be seen as hints for the browser.

Regarding you “50vw” example:
The 50vw would calculate to a maximum of 300px when viewport has max-width: 600px. I guess the browsers thinks: “I need a 300px image and I have a 480px and 800px image. 480px should be good enough even on my HiDPI display.”

10

so then basically it means the mdn article section on responsive images resolution switching needs some edit(mentioning device pixel density factor)

1 Like
11

Yeah, I think it would make sense to note this specific case about the device pixel ratio.

On the page they only mention “hints to help the browser pick the right one” which points to the fact that those rules aren’t set in stone.
On <img>: The Image Embed element - HTML: HyperText Markup Language | MDN there’s another mention of this:

The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or bandwidth conditions.

You could open an issue with the link at the bottom of the page:
Report a problem with this content on GitHub

Thank you and have a nice day,
Michael