🔤Tipografía|digital

Pixel

Symbol: pxWorldwide

0,75pt0,0625pc0,010417in0,026458cm0,264583mm

¿Qué es un/una Pixel (px)?

Definición Formal

Un pixel (abreviatura: px) es el elemento direccionable más pequeño de una imagen rasterizada o pantalla de visualización. En la imagen digital, un pixel representa una única muestra de una imagen — un punto de color definido por valores en un modelo de color (típicamente RGB para pantallas). En el contexto de CSS (Hojas de Estilo en Cascada) y diseño web, un pixel CSS se define como aproximadamente 1/96 de pulgada (0.2646 mm) a una distancia de visualización de 28 pulgadas (71 cm), lo que lo convierte en una unidad de medida angular en lugar de un tamaño físico fijo.

La palabra "pixel" es un portmanteau de "elemento de imagen." En una pantalla, cada pixel es un elemento físico (o grupo de sub-píxeles) que puede emitir o transmitir luz en un color e intensidad específicos. El número total de píxeles determina la resolución de la pantalla — por ejemplo, una pantalla de 1920 × 1080 tiene 2,073,600 píxeles dispuestos en una cuadrícula de 1,920 columnas y 1,080 filas.

Pixel CSS vs. Pixel de Dispositivo

En el desarrollo web moderno, la distinción entre píxeles CSS y píxeles de dispositivo es crucial. Un pixel CSS (también llamado pixel de referencia) tiene un tamaño angular fijo y corresponde aproximadamente a 1/96 de pulgada en una pantalla estándar. Un pixel de dispositivo es el pixel físico real en el hardware de la pantalla. Las pantallas de alta DPI (puntos por pulgada) — como las pantallas Retina de Apple — utilizan múltiples píxeles de dispositivo para renderizar un solo pixel CSS, creando imágenes más nítidas. La relación entre píxeles de dispositivo y píxeles CSS se llama la relación de píxeles de dispositivo (DPR): un DPR de 2 significa que cada pixel CSS es renderizado por una cuadrícula de 2 × 2 píxeles de dispositivo.

Etymology

Origen de la Palabra

La palabra "pixel" fue publicada por primera vez en 1965 por Frederic Billingsley del Laboratorio de Propulsión a Chorro (JPL) de la NASA en un informe técnico sobre imagen digital de sondas espaciales. Billingsley declaró más tarde que tomó prestada la palabra de ingenieros de la Corporación Lockheed y la División Link de General Precision, quienes ya la estaban utilizando de manera informal. El término es una combinación de "imagen" (o "pix," una abreviatura informal utilizada en la industria del entretenimiento desde la década de 1930) y "elemento."

Evolución del Concepto

Antes de que "pixel" se convirtiera en estándar, se utilizaron varios términos para el concepto: "elemento de imagen" (común en la ingeniería de televisión desde la década de 1920), "pel" (utilizado por IBM y aún ocasionalmente encontrado en especificaciones de pantallas), y "punto" (utilizado de manera informal). La abreviatura "px" se convirtió en estándar en CSS con la publicación de la especificación CSS 1.0 en 1996 y desde entonces se ha convertido en el símbolo de unidad más ampliamente reconocido en el diseño web y la tipografía digital.

Historia

Televisión e Imágenes Tempranas

El concepto de pixel precede a la palabra por varias décadas. Los ingenieros de televisión en las décadas de 1920 y 1930 discutían imágenes en términos de "elementos de imagen" — los puntos individuales de luz que componen una imagen de televisión. El estándar NTSC de 1941 para televisión en blanco y negro en los Estados Unidos definió una imagen de aproximadamente 480 líneas verticales, con cada línea compuesta por cientos de elementos de imagen.

Imagen Digital y Exploración Espacial

Los píxeles digitales como los conocemos surgieron a principios de la década de 1960 con el desarrollo de la imagen digital para la exploración espacial. La misión Ranger 7 de la NASA (1964) devolvió las primeras imágenes digitales de otro mundo — fotografías de la superficie de la Luna compuestas de elementos de imagen discretos. Las misiones Mariner a Marte (1965-1969) avanzaron aún más la tecnología de imagen digital, y fue en este contexto que la palabra "pixel" entró en el vocabulario técnico.

La Era de la Computadora Personal

La revolución de la computadora personal trajo los píxeles a la conciencia cotidiana. Las primeras pantallas de PC tenían resoluciones extremadamente bajas: el adaptador CGA del IBM PC (1981) mostraba 320 × 200 píxeles, y el Macintosh 128K (1984) mostraba 512 × 342 píxeles. La resolución aumentó constantemente: VGA (640 × 480) en 1987, XGA (1024 × 768) en 1990, Full HD (1920 × 1080) en los 2000, y 4K (3840 × 2160) en los 2010.

La Revolución de Alta DPI

La introducción de la pantalla Retina por parte de Apple en el iPhone 4 en 2010 marcó un punto de inflexión en la tecnología de píxeles. Al empaquetar 326 píxeles por pulgada (en comparación con los típicos 72-96 PPI de pantallas anteriores), Apple creó pantallas donde los píxeles individuales eran invisibles a simple vista a distancias de visualización normales. Esta innovación requirió la distinción entre píxeles CSS y píxeles de dispositivo e introdujo el concepto de la relación de píxeles de dispositivo.

Uso actual

En Diseño Web y CSS

El pixel es la unidad más comúnmente utilizada en el diseño web. Las propiedades CSS como tamaño de fuente, ancho, alto, padding, margen y ancho de borde se especifican frecuentemente en píxeles. Un tamaño típico de fuente del cuerpo es 16 px, un ancho de página común es 1200 px, y los valores de espaciado estándar son múltiplos de 4 u 8 px. Sin embargo, las prácticas de diseño responsivo favorecen cada vez más las unidades relativas (em, rem, vw, vh) sobre los valores de píxeles fijos para acomodar diferentes tamaños de pantalla y preferencias del usuario.

En Fotografía Digital

La resolución de la cámara se mide en megapíxeles (millones de píxeles). Una cámara de 12 megapíxeles produce imágenes de aproximadamente 4,000 × 3,000 píxeles. Las cámaras de smartphones modernas varían de 12 a 200 megapíxeles, y las cámaras profesionales de formato medio superan los 100 megapíxeles. La resolución de impresión típicamente requiere 300 píxeles por pulgada (PPI), por lo que una imagen de 12 megapíxeles puede producir una impresión de alta calidad de aproximadamente 13 × 10 pulgadas.

En Tecnología de Pantallas

La resolución de pantalla y la densidad de píxeles son especificaciones primarias para monitores, televisores, smartphones y tabletas. Las resoluciones de pantalla comunes incluyen Full HD (1920 × 1080), 2K (2560 × 1440), 4K (3840 × 2160) y 8K (7680 × 4320). La densidad de píxeles, medida en píxeles por pulgada (PPI), varía desde aproximadamente 100 PPI para monitores de escritorio estándar hasta más de 500 PPI para pantallas de smartphones de alta gama.

Everyday Use

Resolución de Pantalla y Compras

Al comprar un televisor, monitor o smartphone, las especificaciones de píxeles son uno de los factores más importantes. Los consumidores comparan conteos de píxeles (por ejemplo, "4K" significa aproximadamente 8 millones de píxeles), densidad de píxeles (PPI) y tecnología de píxeles (OLED, LCD, Mini-LED). Un mayor conteo de píxeles generalmente significa una imagen más nítida, pero la densidad de píxeles (píxeles por pulgada) suele ser más importante que el conteo total de píxeles para la nitidez percibida.

Redes Sociales y Fotografía

Las plataformas de redes sociales imponen especificaciones basadas en píxeles para el contenido subido. Las fotos de Instagram se muestran a 1080 × 1080 píxeles (cuadrado), 1080 × 1350 píxeles (retrato) o 1080 × 566 píxeles (paisaje). Las fotos de portada de Facebook son de 820 × 312 píxeles en escritorio. YouTube recomienda 1920 × 1080 píxeles para video HD estándar y 3840 × 2160 para 4K. Comprender estas dimensiones de píxeles ayuda a los creadores de contenido a optimizar sus imágenes y videos.

Arte y Diseño Digital

Los artistas digitales trabajan directamente con píxeles. El arte en píxeles — una forma de arte digital donde las imágenes se crean y editan a nivel de píxel — ha experimentado un gran renacimiento en videojuegos independientes y diseño de estilo retro. Herramientas como Photoshop, GIMP y Aseprite permiten a los artistas manipular píxeles individuales. El software de diseño muestra las dimensiones del lienzo y los tamaños de las herramientas en píxeles, haciendo del píxel la unidad fundamental de la creación digital.

In Science & Industry

En Imagenología Médica

Los sistemas de imagenología médica se caracterizan por su resolución de píxeles. Un rayos X digital estándar tiene una resolución de aproximadamente 3,000 × 3,000 píxeles con un tamaño de píxel de aproximadamente 140 a 200 micrómetros. Las tomografías computarizadas (TC) típicamente producen imágenes de 512 × 512 píxeles por corte, con tamaños de píxel de 0.5 a 1.0 mm. Las imágenes de MRI varían de 256 × 256 a 1024 × 1024 píxeles. En todos los casos, el tamaño del píxel determina directamente la característica más pequeña detectable.

En Teledetección

La resolución de imágenes satelitales se describe en términos de distancia de muestreo de píxel en el suelo (GSD) — el área física en el suelo representada por un solo píxel. Los satélites Landsat tienen un GSD de 30 metros para bandas multiespectrales, lo que significa que cada píxel representa un área de 30 × 30 metros. Los satélites comerciales como WorldView-3 logran un GSD de 0.31 metros (31 cm), permitiendo la identificación de objetos individuales. El píxel es la unidad fundamental de resolución espacial en teledetección.

En Visión por Computadora e IA

Los modelos de aprendizaje automático para el reconocimiento de imágenes procesan imágenes como arreglos de valores de píxeles. Las redes neuronales convolucionales (CNN) aprenden a extraer características de patrones de píxeles a través de capas sucesivas de abstracción. Los tamaños de las imágenes de entrada se especifican en píxeles: el influyente conjunto de datos ImageNet utiliza imágenes redimensionadas a 224 × 224 píxeles. El costo computacional de entrenamiento e inferencia escala con el número de píxeles de entrada.

Interesting Facts

1

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).

2

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.

3

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.

4

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.

5

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.

6

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.

7

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.

Conversion Table

UnitValue
Point (pt)0,75pxpt
Pica (pc)0,0625pxpc
Inch (in)0,010417pxin
Centimeter (cm)0,026458pxcm
Millimeter (mm)0,264583pxmm

Frequently Asked Questions

What is a pixel?
A pixel is the smallest addressable element of a digital image or display screen. It represents a single point of color. The word is a combination of 'picture' and 'element.' On a screen, millions of pixels arranged in a grid create the images you see.
How many pixels are in an inch?
In CSS and web design, there are 96 pixels per inch (by definition: 1 CSS px = 1/96 inch). On physical displays, the pixels per inch (PPI) varies: standard desktop monitors have about 96 to 110 PPI, Retina/HiDPI displays have 200 to 300+ PPI, and smartphones can exceed 500 PPI.
What is the difference between a CSS pixel and a device pixel?
A CSS pixel is an abstract unit equal to 1/96 of an inch at standard viewing distance. A device pixel is a physical light-emitting element on the screen. On high-DPI displays (like Apple Retina), one CSS pixel maps to multiple device pixels. The ratio 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.
How do I convert pixels to points?
At standard screen resolution (96 DPI), multiply pixels by 0.75 to get points: 1 px = 0.75 pt. Conversely, multiply points by 1.333 to get pixels: 1 pt = 1.333 px. This is because 1 inch = 96 px = 72 pt, so 1 px = 72/96 pt = 0.75 pt.
What is PPI and how does it relate to pixels?
PPI stands for Pixels Per Inch — the number of pixels packed into each linear inch of a display. Higher PPI means sharper images. A standard monitor has about 96 PPI, a Retina MacBook has about 226 PPI, and an iPhone 15 Pro has 460 PPI. PPI is calculated as: PPI = √(width² + height²) / diagonal screen size in inches.
How many pixels do I need for printing?
For high-quality printing, you need 300 pixels per inch (300 DPI). To calculate: multiply the desired print size in inches by 300. For example, an 8×10 inch print needs 2,400 × 3,000 pixels (7.2 megapixels). For large-format prints viewed from a distance, 150 DPI may be sufficient.
What does 4K resolution mean in pixels?
4K Ultra HD resolution is 3,840 × 2,160 pixels, totaling approximately 8.3 million pixels. The '4K' refers to the approximately 4,000 horizontal pixels. Cinema 4K (DCI 4K) is slightly wider at 4,096 × 2,160. For comparison, Full HD (1080p) is 1,920 × 1,080 pixels — exactly one-quarter of 4K.
How do pixels relate to em units?
The relationship between pixels and ems depends on the font size. By default in most browsers, 1 em = 16 px (since the default body font size is 16 px). If you change the font size, the em value changes proportionally: at 20 px font size, 1 em = 20 px. The em unit is relative, while the pixel is absolute in CSS.