Responsive Images: Include Note on Device Pixel Ratios

[columk1]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

Describe your suggestion

Issue

The assigned resources assume some knowledge of device pixel ratios. There are a couple of mentions of pixel density and device pixels as well as use of a multiplier syntax in the sizes attribute but these terms aren't really explained. This is an important factor to consider when placing images and deserves to be covered to provide more context for these resources.

Recommendation

Include a lesson note towards the end of the lesson with a concrete example:

CSS Pixels Vs Physical Pixels: Pixels on a screen don’t always map one-to-one with CSS pixels due to varying Device Pixel Ratios (DPR).
DPR determines how many physical pixels are used to display a single CSS pixel in the viewport. Higher DPR values mean sharper displays but they require higher resolution images to avoid blurriness.

Let's take the iPhone X as an example. It has a DPR of 3, meaning each CSS pixel is rendered using 3×3 = 9 physical pixels. The viewport size on this device is 375px x 812px (logical CSS pixels) but the actual screen resolution is 1125px x 2436px (physical pixels). An image that fills the width of the device’s viewport (375 CSS pixels wide) would need to be 375 × 3 = 1125 pixels wide in physical resolution to appear sharp. An image 375 pixels wide will fill the viewport but it will be blurry due to repeated pixels.

Another option is to include another resource. https://web.dev/learn/images/descriptive This one is really good but there is already a lot of reading in the current resources and there is some overlap, that's why I suggest adding a note to the lesson.

Path

Ruby / Rails, Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-responsive-images

(Optional) Discord Name

columk

(Optional) Additional Comments

No response

[columk1]

This note could also be placed in the CSS Units lesson. I think it's more relevant here as it relates to images and provides context that will help with the assigned resources.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[ManonLef]

This can be put in additional resources. Opening it up for contributions.

[Devuh]

I'd be happy to take this one if it's not already being worked on.