fix(html): update resolution switching demo pros (#30902)

* fix(html): update resolution switching demo pros * Apply suggestions from code review --------- Co-authored-by: Hamish Willee <[email protected]>
mdn · Jun 21, 2024 · b275722 · b275722
1 parent 1c8c727
commit b275722
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -127,7 +127,9 @@ Older browsers that don't support these features will just ignore them. Instead,
 
 ### Resolution switching: Same size, different resolutions
 
-If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using `srcset` with x-descriptors and without `sizes` — a somewhat easier syntax! You can find an example of what this looks like in [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (see also [the source code](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
+Suppose you have an image that will be rendered at the same real-world size on displays that have different screen resolutions. You can provide a better user experience on high resolution displays by serving a higher resolution version of the image.
+
+To achieve this you can allow the browser to choose an appropriate resolution image by using `srcset` with x-descriptors and without `sizes` — a somewhat easier syntax! You can find an example of what this looks like in [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (see also [the source code](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
 
 ```html
 <img
@@ -136,6 +138,8 @@ If you're supporting multiple display resolutions, but everyone sees your image
  alt="Elva dressed as a fairy" />
 ```
 
+Note that even though the image is always displayed with the same size, on higher resolution displays you get to see more details.
+
 ![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](resolution-example.png)
 
 In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):