Pixel
Symbol: pxWorldwide
What is a Pixel (px)?
Formal Definition
A pixel (abbreviation: px) is the smallest addressable element of a raster image or display screen. In digital imaging, a pixel represents a single sample of an image — a point of color defined by values in a color model (typically RGB for screens). In the context of CSS (Cascading Style Sheets) and web design, one CSS pixel is defined as approximately 1/96 of an inch (0.2646 mm) at a viewing distance of 28 inches (71 cm), making it a unit of angular measurement rather than a fixed physical size.
The word "pixel" is a portmanteau of "picture element." On a display, each pixel is a physical element (or group of sub-pixels) that can emit or transmit light at a specific color and intensity. The total number of pixels determines the display's resolution — for example, a 1920 × 1080 display has 2,073,600 pixels arranged in a grid of 1,920 columns and 1,080 rows.
CSS Pixel vs. Device Pixel
In modern web development, the distinction between CSS pixels and device pixels is crucial. A CSS pixel (also called a reference pixel) has a fixed angular size and corresponds to approximately 1/96 inch on a standard display. A device pixel is the actual physical pixel on the screen hardware. High-DPI (dots per inch) displays — such as Apple's Retina displays — use multiple device pixels to render a single CSS pixel, creating sharper images. The ratio between device pixels and CSS pixels is called the device pixel ratio (DPR): a DPR of 2 means each CSS pixel is rendered by a 2 × 2 grid of device pixels.
Etymology
Origin of the Word
The word "pixel" was first published in 1965 by Frederic Billingsley of NASA's Jet Propulsion Laboratory (JPL) in a technical report about digital imaging from space probes. Billingsley later stated he borrowed the word from engineers at the Lockheed Corporation and Link Division of General Precision, who were already using it informally. The term is a combination of "picture" (or "pix," an informal abbreviation used in the entertainment industry since the 1930s) and "element."
Evolution of the Concept
Before "pixel" became standard, various terms were used for the concept: "picture element" (common in television engineering from the 1920s), "pel" (used by IBM and still occasionally encountered in display specifications), and "dot" (used informally). The abbreviation "px" became standard in CSS with the publication of the CSS 1.0 specification in 1996 and has since become the most widely recognized unit symbol in web design and digital typography.
History
Television and Early Imaging
The concept of the pixel predates the word by several decades. Television engineers in the 1920s and 1930s discussed images in terms of "picture elements" — the individual points of light that compose a TV image. The 1941 NTSC standard for black-and-white television in the United States defined an image of approximately 480 vertical lines, with each line composed of hundreds of picture elements.
Digital Imaging and Space Exploration
Digital pixels as we know them emerged in the early 1960s with the development of digital imaging for space exploration. NASA's Ranger 7 mission (1964) returned the first digital images from another world — photographs of the Moon's surface composed of discrete picture elements. The Mariner missions to Mars (1965-1969) further advanced digital imaging technology, and it was in this context that the word "pixel" entered technical vocabulary.
The Personal Computer Era
The personal computer revolution brought pixels into everyday awareness. Early PC displays had extremely low resolutions: the IBM PC's CGA adapter (1981) displayed 320 × 200 pixels, and the Macintosh 128K (1984) displayed 512 × 342 pixels. Resolution steadily increased: VGA (640 × 480) in 1987, XGA (1024 × 768) in 1990, Full HD (1920 × 1080) in the 2000s, and 4K (3840 × 2160) in the 2010s.
The High-DPI Revolution
Apple's introduction of the Retina display on the iPhone 4 in 2010 marked a turning point in pixel technology. By packing 326 pixels per inch (compared to the typical 72-96 PPI of earlier displays), Apple created screens where individual pixels were invisible to the naked eye at normal viewing distances. This innovation necessitated the distinction between CSS pixels and device pixels and introduced the concept of the device pixel ratio.
Current Use
In Web Design and CSS
The pixel is the most commonly used unit in web design. CSS properties such as font-size, width, height, padding, margin, and border-width are frequently specified in pixels. A typical body font size is 16 px, a common page width is 1200 px, and standard spacing values are multiples of 4 or 8 px. However, responsive design practices increasingly favor relative units (em, rem, vw, vh) over fixed pixel values to accommodate different screen sizes and user preferences.
In Digital Photography
Camera resolution is measured in megapixels (millions of pixels). A 12-megapixel camera produces images of approximately 4,000 × 3,000 pixels. Modern smartphone cameras range from 12 to 200 megapixels, and professional medium-format cameras exceed 100 megapixels. Print resolution typically requires 300 pixels per inch (PPI), so a 12-megapixel image can produce a high-quality print of approximately 13 × 10 inches.
In Display Technology
Display resolution and pixel density are primary specifications for monitors, TVs, smartphones, and tablets. Common display resolutions include Full HD (1920 × 1080), 2K (2560 × 1440), 4K (3840 × 2160), and 8K (7680 × 4320). Pixel density, measured in pixels per inch (PPI), ranges from about 100 PPI for standard desktop monitors to over 500 PPI for high-end smartphone displays.
Everyday Use
Screen Resolution and Shopping
When purchasing a TV, monitor, or smartphone, pixel specifications are among the most important factors. Consumers compare pixel counts (e.g., "4K" means approximately 8 million pixels), pixel density (PPI), and pixel technology (OLED, LCD, Mini-LED). A higher pixel count generally means a sharper image, but pixel density (pixels per inch) is often more important than total pixel count for perceived sharpness.
Social Media and Photography
Social media platforms impose pixel-based specifications for uploaded content. Instagram photos are displayed at 1080 × 1080 pixels (square), 1080 × 1350 pixels (portrait), or 1080 × 566 pixels (landscape). Facebook cover photos are 820 × 312 pixels on desktop. YouTube recommends 1920 × 1080 pixels for standard HD video and 3840 × 2160 for 4K. Understanding these pixel dimensions helps content creators optimize their images and videos.
Digital Art and Design
Digital artists work directly with pixels. Pixel art — a form of digital art where images are created and edited at the pixel level — has experienced a major revival in indie video games and retro-styled design. Tools like Photoshop, GIMP, and Aseprite allow artists to manipulate individual pixels. Design software displays canvas dimensions and tool sizes in pixels, making the pixel the fundamental unit of digital creation.
In Science & Industry
In Medical Imaging
Medical imaging systems are characterized by their pixel resolution. A standard digital X-ray has a resolution of approximately 3,000 × 3,000 pixels with a pixel size of about 140 to 200 micrometers. CT (computed tomography) scans typically produce images of 512 × 512 pixels per slice, with pixel sizes of 0.5 to 1.0 mm. MRI images range from 256 × 256 to 1024 × 1024 pixels. In all cases, pixel size directly determines the smallest detectable feature.
In Remote Sensing
Satellite imagery resolution is described in terms of pixel ground sample distance (GSD) — the physical area on the ground represented by a single pixel. Landsat satellites have a GSD of 30 meters for multispectral bands, meaning each pixel represents a 30 × 30 meter area. Commercial satellites like WorldView-3 achieve GSD of 0.31 meters (31 cm), enabling identification of individual objects. The pixel is the fundamental unit of spatial resolution in remote sensing.
In Computer Vision and AI
Machine learning models for image recognition process images as arrays of pixel values. Convolutional neural networks (CNNs) learn to extract features from pixel patterns through successive layers of abstraction. Input image sizes are specified in pixels: the influential ImageNet dataset uses images resized to 224 × 224 pixels. The computational cost of training and inference scales with the number of input pixels.
Interesting Facts
The first digital image ever produced was a scan of a photograph of Walden Kirsch, the son of computer scientist Russell Kirsch, in 1957. The image was 176 × 176 pixels — just 30,976 pixels total — and displayed in only two tones (black and white).
Apple's Retina display concept is based on the limit of human visual acuity: at normal viewing distances, the eye cannot distinguish individual pixels when the density exceeds approximately 300 PPI. The iPhone 4's Retina display achieved 326 PPI in 2010.
A single pixel on a modern OLED display is composed of three sub-pixels (red, green, and blue), each of which can be independently controlled. Some displays use four sub-pixels (RGBW), adding a white sub-pixel for improved brightness and efficiency.
The word 'megapixel' entered common vocabulary with the rise of digital cameras in the late 1990s. The first consumer digital camera with a resolution exceeding 1 megapixel was the Fujifilm DS-300 in 1997.
In CSS, 1 px is defined as 1/96 of an inch, while 1 pt (point) is 1/72 of an inch. This means 1 pt = 96/72 px = 1.333 px. This seemingly arbitrary relationship stems from the different historical origins of the two units.
The total number of pixels in the world's displays is estimated at over 100 quadrillion (10¹⁷), and this number is growing rapidly with the adoption of higher-resolution screens. Collectively, humanity refreshes these pixels billions of times per second.
Dead pixels — pixels that remain permanently off (black), on (white), or stuck at a single color — are a common defect in LCD and OLED displays. Most manufacturers allow 1 to 5 dead pixels per display without considering it defective.