fix(html): update resolution switching demo pros

[OnkarRuikar]

• fixes Issue with "Responsive images": cannot see a change to the image #3397

The updates assert that the rendered image size doesn't change but the image quality does change on higher resolution displays.

• Also, fix(html): update srcset-resolutions demo learning-area#694 updates the demo code. The changes tell viewers which image got loaded.

[github-actions]

Preview URLs

• /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

External URLs (1)

URL: /en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Title: Responsive images

• https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-05-04 02:12:08)

[hamishwillee]

@OnkarRuikar Thanks very much. I've subedited the English a little.

I haven't approved because even though this is better, do you think we could improve the example by displaying the three source images below, allowing the user to compare the versions they might get on each screen (and noting that you would only see the benefit on a higher resolution screen)? Most of the time this should be useful and make the effects more obvious, in particular because we most people will have better than the crappiest screen by default.

[OnkarRuikar]

do you think we could improve the example by displaying the three source images below

@hamishwillee I've updated the example in learning-area repo: mdn/learning-area#696

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[hamishwillee]

Thanks very much