Issue with "Responsive images": cannot see a change to the image

[RPIERIS]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

What information was incorrect, unhelpful, or incomplete?

I am using Firefox developer edition on the section Resolution Switching: Same size, Different resolutions and I cannot see a change to the image. This is not the case when I use Chrove Developer edition. Please note I was looking at the html on github.

Specific section or headline?

See above

What did you expect to see?

I expected the image size to physically change

Did you test this? If so, how?

I used Chrome developer edition and it changed.

MDN Content page report details

• Folder: en-us/learn/html/multimedia_and_embedding/responsive_images
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.html
• Last commit: https://github.com/mdn/content/commit/49f606217b82a761b6b52946ea4da3752d2375ee
• Document last modified: 2021-02-09T19:08:28.000Z

[rachelandrew]

@RPIERIS what steps did you take to see/not see the change?

We have had a few reports on this page and I've never been able to figure out what people are actually reporting, so this would be helpful to know!

[RPIERIS]

@rachelandrew I think I misunderstood what was expected.

I am specifically looking at the srcset-resolutions.html. This is in the Resolution switching: Same size, different resolutions section.

I expected the images to get bigger or smaller 320w 480w 640w based on the screen size and due to responsiveness. The chrome browser appears to change the dimensions while on firefox developer there is overflow with no change. I think I confused responsiveness with resolution. Let me know if I have misunderstood. BTW thanks for Grid by example.

[OnkarRuikar]

I expected the images to get bigger or smaller 320w 480w 640w based on the screen size and due to responsiveness.

The image shouldn't change size as the width has explicitly been set to 320px. The demo is all about showing bigger images(in same screen size) on higher quality screens(e.g. Apple devices) for better experience.

[teoli2003]

Maybe there is some text to improve to make this clearer?

[mattdecamp]

What may help is an aside reminding the reader that though the example uses images with different widths, because the CSS constrains the width to 320px, we only need to think of the larger images as richer versions of the default one.

If users read this section immediately after the previous one (Resolution switching: Different sizes), I could see that some could be confused about the expected result.