TheOdinProject / curriculum

The open curriculum for learning web development
https://www.theodinproject.com/
Other
10.12k stars 13.57k forks source link

Responsive Images: Include Note on Device Pixel Ratios #28761

Open columk1 opened 2 months ago

columk1 commented 2 months ago

Checks

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 commented 2 months ago

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] commented 1 month ago

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