About Pixels

Pixel

• Physical Pixel: the smallest light-emitting unit on a screen
• CSS Pixel: a physical unit of measurement. 1 pixel equals 1/96 inch

1 inch = 2.54 centimeters. When describing screen sizes, 12.9 inch means the diagonal of the screen is 12.9 inches, that is, 32.766 cm.

Resolution & Pixel Density

• Resolution: the number of pixels a screen/image has horizontally and vertically, in px (pixel)
• Pixel Density: a measure of display sharpness, usually in PPI, Pixels Per Inch, i.e. how many physical pixels a display has per inch

Take the 12.9-inch iPad as an example. Its resolution is 2048x2732, so its PPI works out to

At the same physical size, shrinking the distance between pixels (i.e. packing in more physical pixels) improves image quality. You may occasionally see this parameter on shopping sites as Pixel Pitch, the distance between two adjacent pixels on a display.

Device Pixel Ratio (DPR)

Most products have a pixel density of 96 PPI, which gives:

But as mobile devices evolved, high-pixel-density displays appeared, and a device’s physical pixels no longer matched CSS pixels. The iPad Pro 12.9-inch mentioned above is one example: its is $ 264 / 96 \approx 2.83$

Hence the concept of devicePixelRatio, which links a device’s physical pixels to CSS pixels, so when setting pixel values in CSS you no longer have to worry about device differences.

Device Pixel Ratio - Oxyplug lists the DPR of common devices:

You can print window.devicePixelRatio in the DevTools console to check your device’s DPR:

Responsive Image

Rendered Size & Intrinsic Size

In DevTools you can see two important sizes for an image: Rendered Size and Intrinsic Size

• Rendered Size: the size the image displays at, in CSS px. For example, 879x500 means the image renders 879 CSS px wide and 500 CSS px tall in the browser
• Intrinsic Size: the pixel dimensions of the image file itself, in image pixels. For example, 2048x1000 means the image is 2048 pixels wide and 1000 pixels tall.

Ideally, you want

• • Wastes bandwidth and hurts performance
• • The image resolution is too low, which can cause blurring or distortion

Srcset

Building on the pixel concepts above, we can use the srcset attribute to serve appropriately sized image resources to different devices. srcset lets us provide different image sources based on the device’s DPR or the viewport width.

The x descriptor (DPR-based)

This one is simple: tell the browser directly which image to use at each DPR.

<img  src="image-1x.jpg"  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"  alt="A red wolf"  width="300"  height="200"/>

The w descriptor (viewport-based)

When the image width changes with the viewport (fluid layouts), use the w descriptor. Tell the browser the real width of each image (in image pixels), and the browser will factor in the current DPR, viewport size, and the sizes attribute to pick the best resource to load, giving you responsive image loading.

<img  src="image-800w.jpg"  srcset="    image-400w.jpg   400w,    image-800w.jpg   800w,    image-1200w.jpg 1200w,    image-1600w.jpg 1600w  "  alt="A red wolf"/>

Ref

• Window: devicePixelRatio property - Web APIs | MDN
• Responsive Images - A Reference Guide from A to Z | ImageKit.io
• Responsive Images Done Right: A Guide To And srcset — Smashing Magazine
• HTMLImageElement: srcset property - Web APIs | MDN
• Image Sizing: Intrinsic vs. Rendered Size | DebugBear
• HiDPI vs. Retina Displays — Understanding Pixel Density in the 4K Era | EIZO