Una imagen puede guardarse como una cuadrícula de píxeles o como una fórmula matemática. Esa diferencia decide si una imagen se pixela al ampliarla o se mantiene siempre nítida.
En diseño digital, casi toda imagen pertenece a una de dos familias. Una mapa de bits (raster) guarda el color de cada punto, uno por uno. Un gráfico vectorial guarda, en cambio, instrucciones matemáticas para dibujar líneas y curvas.
Cada píxel guarda su propio color. Al ampliar la imagen, esos cuadritos se hacen visibles.
Guarda puntos y curvas descritas con matemáticas. El navegador las recalcula a cualquier tamaño.
Ambas imágenes de abajo representan el mismo corazón. Sube el zoom y observa qué pasa con cada una: una se convierte en bloques, la otra sigue perfectamente lisa.
El mapa de bits solo tiene 8×8 puntos guardados: al agrandarlo, el navegador no tiene más información y agranda cada punto. El vector recalcula la curva matemáticamente en cada tamaño, así que siempre se ve igual de nítida.
Un programa de diseño vectorial (Illustrator, Figma, Inkscape) no dibuja a mano alzada: coloca puntos de anclaje y manejadores de control, y calcula la curva entre ellos. Arrastra los puntos azules (anclajes) y los de color (manejadores) para moldear la curva.
Con solo 4 puntos y sus coordenadas, el navegador reconstruye la curva exacta a cualquier resolución: por eso un archivo vectorial de pocos KB puede imprimirse del tamaño de un ícono o de un panorámico.
Deben verse igual de nítidos en una favicon de 16 px y en un letrero de 3 metros.
Millones de matices de color y textura que no se pueden describir con fórmulas simples.
Formas simples y editables: cambiar un color o un trazo no exige rehacer la imagen.
Pinceles digitales, granulado, mezclas de color que dependen de cada píxel individual.
La diferencia no es de calidad, sino de naturaleza: uno guarda una foto de la realidad; el otro guarda la receta para dibujarla.
Un mapa de bits se define por su resolución
Un vector se define por una trayectoria matemática
Regla práctica