La misma imagen. Una matemática completamente distinta.

Cómo almacenan una imagen los gráficos de píxeles

Una imagen de píxeles es, literalmente, una cuadrícula. Una imagen de 1920×1080 almacena 2.073.600 píxeles individuales, cada uno con un valor de color (normalmente 24 bits: 8 bits para rojo, verde y azul) más 8 bits opcionales de alfa. La imagen «es» los datos de píxeles.

La compresión (PNG, JPG, WebP) reduce el espacio en disco, pero no cambia el modelo subyacente: cuando abres el archivo, sigues obteniendo una cuadrícula de 1920×1080 valores de píxel con la que trabajar. La imagen lleva una resolución fija grabada en el momento de la captura o creación.

Cómo almacenan una imagen los gráficos vectoriales

Una imagen vectorial es una secuencia de instrucciones de dibujo. Un logotipo podría ser: «empieza en (10, 10), traza una curva de Bézier hasta (50, 80) con puntos de control en (20, 30) y (40, 70), rellena la región resultante con el hexadecimal #00B74A».

El archivo almacena las instrucciones, no la imagen. Cuando lo abres, el motor de renderizado (navegador, plóter, CNC) recorre la lista de instrucciones y dibuja el resultado al tamaño de salida que le pidas. Las instrucciones no cambian; el renderizado sí.

La matemática del escalado

Toma un logotipo de píxeles de 200×200 y pide al navegador que lo muestre a 2000×2000. Hay 4.000.000 de píxeles que dibujar, pero solo 40.000 en la fuente. El navegador tiene que inventar los otros 3.960.000 mediante interpolación —normalmente bilineal o bicúbica—, lo que produce bordes borrosos. La densidad real de información de la imagen a 2000×2000 sigue siendo 200×200; solo la has estirado.

Toma el mismo logotipo como vector y renderízalo a 2000×2000. La matemática se recalcula a la nueva resolución: cada segmento de curva se evalúa para encajar exactamente en la cuadrícula de 2000×2000. Los bordes se mantienen nítidos porque el motor usa la resolución de salida completa desde cero.

Compromisos de tamaño de archivo y cómputo

Los formatos de píxeles y de vectores intercambian espacio por tiempo. Los píxeles son baratos de renderizar (basta con volcar la cuadrícula a la pantalla), pero caros de almacenar a altas resoluciones. Los vectores son baratos de almacenar, pero exigen cálculo en el momento de renderizar.

DPI, resolución y por qué el vector ignora ambos

El DPI (puntos por pulgada) es un concepto del formato de píxeles. Describe cuántos píxeles por pulgada de salida debe ocupar el archivo. Una imagen de 1200×1200 a 300 DPI imprime a 4×4 pulgadas; a 72 DPI imprime a unas 16,7×16,7 pulgadas, pero se ve pixelada en el papel porque solo hay 72 píxeles de detalle por pulgada.

Los archivos vectoriales no tienen DPI: la matemática se renderiza a la densidad de píxeles que pida el dispositivo de salida. Un logotipo vectorial imprime a 300 DPI con la misma limpieza que a 72 DPI o que a 4800 DPI (prensa offset). La frontera píxel-vs-vector es también una frontera DPI-vs-independencia de resolución.

Suavizado de bordes — el compromiso visible

Cuando un vector se renderiza a una resolución de salida baja, las curvas se muestrean sobre una cuadrícula de píxeles tosca. El motor usa suavizado de bordes —píxeles parcialmente transparentes a lo largo de los bordes— para que la curva parezca lisa. A resoluciones de salida mayores, la huella del suavizado se reduce y el borde se ve más nítido.

Las imágenes de píxeles ya tienen el suavizado «grabado» a la resolución de la fuente. Cuando las reescalas, los píxeles de suavizado grabados crecen proporcionalmente y se hacen visibles como bordes difusos. No hay forma de añadir más suavizado a una imagen de píxeles sin redibujarla: la resolución de la fuente es un techo infranqueable.

Cuándo gana cada uno — por tipo de contenido

Contenido fotográfico

Siempre píxel. El vector no puede representar los millones de variaciones tonales sutiles que capta una cámara. Incluso los vectorizadores con IA producen interpretaciones estilizadas, no una reproducción fotográfica fiel.

Logotipos y marcas

Siempre vector. Necesitan escalar de favicon a valla publicitaria sin tener que remasterizarse.

Iconos y gráficos de UI

Vector. Los conjuntos de iconos SVG se ven nítidos en cualquier DPI de pantalla; los iconos de píxeles necesitan varias variantes de resolución (1×, 2×, 3×).

Trazados de corte de producción (vinilo, CNC, láser)

Vector. La herramienta de corte necesita la geometría del trazado, no datos de píxeles.

Fuente para digitalización de bordado

Vector. La geometría apta para puntadas sale de trazados vectoriales limpios.

Capturas de pantalla

Píxel. La fuente es nativa de píxeles (tu pantalla).

Mezcla de foto + texto (anuncios de revista, pósteres)

Ambos. Píxel para la foto, vector para el texto y los elementos gráficos. Combinados en un PDF/X-4 para imprenta o en un PSD/AI por capas para editar.