Pixel

A pixel (short for "picture element") is the fundamental building block of digital images. On a display, each pixel corresponds to a physical light-emitting element. In image data, it represents a logical point holding a single color value. An image's resolution (pixel dimensions) is expressed as its width and height in pixels.

The amount of color information each pixel stores is determined by color depth (bit depth). Standard 24-bit color allocates 8 bits each for red, green, and blue channels, yielding 16,777,216 possible colors. 32-bit adds an alpha channel for transparency.

• Physical vs. logical pixels: On Retina displays, one CSS pixel maps to a 2x2 or 3x3 grid of physical pixels. window.devicePixelRatio exposes this ratio to web applications
• Subpixels: LCD panels compose each pixel from three RGB subpixels. Subpixel rendering exploits this structure to improve apparent text resolution
• Pixel density: Higher PPI (pixels per inch) makes individual pixels imperceptible to the naked eye, producing smoother visual output

In web development, layouts are designed in CSS pixels, with srcset and image-set() delivering appropriately sized images to high-density displays. Understanding the distinction between device pixels and CSS pixels is essential for building responsive, sharp interfaces across modern display hardware.