What is pixels ?

This will be an extra part to add the needed knowledge to the Understand Images for Web Developers series

If you haven't already seen the first two parts, I recommend clicking here and here.

Device Pixel

What is the physical device pixel?

When you see a screen resolution expressed as "2560 x 1600," it means that the display has a grid of 2560 pixels in width and 1600 pixels in height. In this context,

• The "2560" represents the number of horizontal pixels, which determine the width of the screen.

• The "1600" represents the number of vertical pixels, which determine the height of the screen.

So, if you have a screen with a resolution of 2560 x 1600 pixels, it means that the display is capable of displaying a grid of 2560 individual pixels from left to right and 1600 individual pixels from top to bottom. This resolution helps define the level of detail and sharpness that the screen can provide, with higher resolutions typically offering more detail and clarity.

Pixel Per Inch (PPI)

PPI is a measure of the pixel density or resolution of a computer screen, television screen, or other display device. It represents the number of pixels that fit on a 1-inch line. The higher the PPI value, the more pixels there are in a given area, resulting in a higher level of detail and sharper image quality.

For example, if a screen has a PPI of 100, it means that there are 100 pixels in every inch of the screen. This means that the screen can display more detail than a screen with a lower PPI.

Calculate PPI for your screen

CSS Pixels

These are virtual units used in web design to specify sizes and dimensions in CSS. CSS pixels are not tied to the physical pixels on a specific device. Instead, they are scaled by the browser to match the device's screen resolution. This scaling ensures that elements appear consistent in size across different devices, regardless of their physical pixel density.

When you set a CSS property like width: 70px; you are using CSS pixels. The browser internally performs the necessary scaling to map these CSS pixels to the appropriate number of physical device pixels based on the device's screen resolution. This allows web designers to create layouts and designs that look consistent across a wide range of devices, from high-resolution screens to lower-resolution screens.

Window.devicePixelRatio

Let's smoke some weeds

What is devicePixelRatio?

This value is used to map the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

/** Let's have an example **/
img {
  width:60px;
}

Value 60px: In this case, we are setting the width to be 60 pixels. These are CSS pixels, not device pixels. CSS pixels are a relative unit of measurement used in web design and are subject to scaling based on the device's pixel ratio, as discussed earlier.

• If your device has a pixel ratio of 1x (common for many standard displays), then 60 CSS pixels will approximately correspond to 60 physical device pixels.

• If your device has a pixel ratio of 2x, then 60 CSS pixels will be rendered using 120 physical device pixels (2 times 60), resulting in a sharper image.

The advantage of having a pixel ratio of 2x

If your device has a pixel ratio of 2 (often referred to as a "2x" or "Retina" display), it means that the device uses twice as many physical device pixels to represent each CSS pixel compared to a standard 1x pixel ratio display.

When you view content on a 2x pixel ratio display, elements in web pages will be rendered with more detail and sharpness because there are more physical pixels available to display each CSS pixel. However, this doesn't necessarily mean that every element's dimensions will be automatically doubled.

Here's how it works:

1. Images: Images designed for a 2x pixel ratio display will have twice the resolution (twice as many pixels) compared to the same image on a 1x pixel ratio display. This ensures that images appear sharp and clear on high-resolution screens without needing to double the physical size of the image element in CSS.

2. Text: Text elements may appear sharper and more detailed on a 2x pixel ratio display because the additional pixels can be used to render smaller text features more accurately. However, the physical size of text elements (e.g., font size in CSS) does not need to be doubled to achieve this sharpness.

3. Element Dimensions: The dimensions of HTML elements (e.g., <div>, <span>, etc.) specified in CSS using pixels will not automatically double on a 2x pixel ratio display. If you set an element's width to 100px, it will still be 100 CSS pixels wide, but it will be rendered with greater detail due to the higher pixel density of the display.

In summary, a 2x pixel ratio display doesn't require you to double the dimensions of every element in CSS. Instead, it allows content to be rendered with more detail and sharpness using the additional physical pixels available. Web browsers and operating systems handle the scaling and rendering to ensure that content looks good on high-resolution screens.

Conclusion

We've just explored the world of web pixels, and this knowledge will serve as a foundation for delving into advanced topics like how the web manages images across various view sizes and screen resolutions. Until then, take care, and I look forward to our next encounter.

A friendly reminder: To receive more high-quality content, please consider subscribing to my newsletter.