Pixel

A pixel (short for "picture element") is the fundamental building block of digital images. On a display, each pixel corresponds to a physical display 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). 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: Some 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 harder to distinguish with 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.