Resolution switching: Same size, different resolutions - Article Error or Clarification

[RisingThunder]

Request type

• Correction or update

Details

Reference MDN Web Docs tutorial,
Responsive Images: Resolution switching: Same size, different resolutions.

Could this be looked at please?
Are the "x-descriptors" in the given sample image element crossed, or incorrectly assigned? And shouldn't the style width be 640px in the example as shown, for, as to, why would a 640px image be loaded only to be display at 320px?

In creating my own learning example using the article, I was getting opposite results than what I would have expected. On a desktop monitor (2560 x 1080) the browser would load the smallest resolution image, and on a cell phone a larger resolution image.

Example given
<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
and it's related CSS
img { width: 320px; }

However to get the expected results, as I'd think, of a 640px resolution image, at a full size on a desktop, and a lower resolution image downloaded on a cell phone, I used the below on my example media learning & testing webpage, (and the source code link link).
for example, the bottom firetruck image.
<img id="firetruckimg" srcset="../images/fire-truck-320w.png 2x, ../images/fire-truck-480w.png 1.5, ../images/fire-truck-640w.png" src="../images/fire-truck-640w.png" alt="URAL 4320 fire truck AA-8.0">
and it's related CSS,
#firetruckimg { display:block; width:640px }

As you can see, I changed the CSS width to 640px and set the fire-truck-320w.png to 2x, and the fire-truck-640w.png to 1x by leaving it blank, basically opposite of what the given example html is showing.

Am I missing something here, or is the given example in error? This has caused myself much confusion and time, although by studying and staying at it, I now have a good understanding of what is intended to be demonstrated, at least, I think so anyway!
Please let me know!
Thanks!!

[chrisdavidmills]

@RisingThunder I made some changes to this example recently, due to similar feedback from somewhere else. IS it any better now? If not, I'll have a look at it in our next work sprint.

[RisingThunder]

I'll check it, going on a work stretch, so be a couple of days or so, Thanks!!

[RisingThunder]

Note: I updated/fixed the links in my original post.
Hi Chris, apologize for the delay in responding, work and family...
No, my understanding of how the "Resolution switching: Same size, different resolutions" example is still inverse of the given MDN web docs example.
For example (the first fire truck on my media page), to get the results of the low resolution image (fire-truck-320w.png) loaded to my cell phone screen, and the higher resolution image (fire-truck-640w.png) loaded to my desktop monitor, I'm using the below,

<img srcset="images/fire-truck-320w.png 2x,
             images/fire-truck-480w.png 1.5x,
             images/fire-truck-640w.png"
     src="images/fire-truck-640w.png" alt=" Image of a URAL 4320 fire truck AA-8.0" id="firetruckimg">

which is the inverse of the MDN web docs example (basically, swapping the x-descriptors).
The given MDN web docs article example is;

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

However, this MDN web docs example of the linked "srcset-resolutions.html" loads the higher resolution image (elva-fairy-640w.jpg) to my cell phone screen, and the lower resolution image (elva-fairy-320w.jpg) to my desktop. Which is the inverse of what is attempting to be accomplished, as I understand it anyway.
Thanks!!

[chrisdavidmills]

I've just not gotten to this one, for years now, and it seems like a fairly important point to get right. @rachelandrew , can you have a look at this one soonish?

[rachelandrew]

I did look at this and couldn't reproduce the issue, or perhaps am not understanding the issue. Could you reproduce the problem @chrisdavidmills ?

[chrisdavidmills]

The basic TL;DR is that @RisingThunder 's responsive images example on https://risingthunder.github.io/media.html is not working correctly (not getting the correct images loaded for narrow screens, and wide screens), and we need to work out if they have done something wrong, and/or if the information in my Responsive images article is wrong.

[rachelandrew]

I'll have another look but last time I looked I'm afraid I couldn't make head nor tail of it as I wasn't seeing the same thing as reported.

[rachelandrew]

So the MDN example loads the correct image to desktop for me (the larger image) because my desktop has a high res screen. So that is correct as far as my understanding goes. This is looking at screen resolution not "narrow or wide screens". This whole thread seems to assume a small screen is low res and a large one high res, which isn't necessarily the case.

However maybe I'm the one confused :)

[chrisdavidmills]

Hrm, maybe we can close it then, if the MDN page makes sense.