Imágenes rasterizadas vs vectoriales: ¿cuál es la diferencia?

Ampliar una fotografía y ampliar un logotipo se parecen tanto como copiar un cuadro y volver a pintarlo. En el primer caso el resultado se llena de interpolación; en el segundo, el dibujo se reconstruye desde sus instrucciones. Esa distancia es la base de cualquier discusión entre imágenes rasterizadas vs vectoriales.

La diferencia no está en la calidad del archivo ni en lo moderno del formato. Está en qué tipo de información guarda cada uno y qué se puede hacer con ella después.

Píxeles y geometría

Una imagen rasterizada es una rejilla. Cada celda guarda un color y la imagen es la suma de todas. Su tamaño está fijado en el momento en que se crea.

Una imagen vectorial guarda instrucciones. Formas, posiciones, curvas y colores descritos como geometría. El programa que la muestra calcula los píxeles cada vez, al tamaño que se le pida.

De ahí salen todas las demás diferencias. Un raster tiene una resolución concreta; un vector no. Un raster se edita cambiando valores de píxel; un vector se edita moviendo nodos. Un raster con mucho detalle pesa; un vector con mucha complejidad también, aunque por otras razones.

El cálculo de la ampliación es fácil de hacer. Una imagen de 1.000 por 1.000 píxeles tiene un millón. La misma, ampliada a 4.000 por 4.000, tiene dieciséis millones, y ninguno de los quince millones nuevos contiene detalle real.

Qué guarda cada uno

El estándar de referencia para vectores en la web es SVG, una especificación del W3C para gráficos vectoriales en dos dimensiones. El formato es XML, así que se puede leer como texto y editar con herramientas que no dependen de una aplicación concreta.

Un mapa de bits, en cambio, depende de su rejilla. Cambiar el tamaño obliga a interpolar: el programa inventa píxeles para rellenar los huecos, y el resultado pierde nitidez a partir del segundo o tercer aumento.

El viewBox como contrato de escala

En un SVG, el atributo viewBox define el sistema de coordenadas con el que se dibujó el contenido y lo separa del tamaño con el que se muestra. Un icono con viewBox="0 0 24 24" mostrado a 96 píxeles se está representando a escala cuatro, y el archivo no cambia ni un byte.

Esa separación es lo que permite que un archivo pequeño sirva para todos los tamaños. En un raster no existe: hay una rejilla de 96 píxeles o una de 960, y son archivos distintos.

Cuando el SVG lleva una foto dentro

Un SVG puede incrustar una imagen de mapa de bits. Cuando lo hace, el archivo es vectorial solo en parte, y esa parte rasterizada se pixela al ampliar como cualquier otra foto.

Es un caso frecuente en logotipos que llevan una fotografía o una textura dentro. La capa vectorial sigue nítida y la foto se degrada, y el resultado mezcla dos calidades en el mismo dibujo.

Mitos que cuestan decisiones

El primero: vectorial siempre pesa menos. Falso. Un dibujo con miles de nodos puede ocupar más que una imagen sencilla. Lo que el vector ahorra es resolución, no bytes.

El segundo: convertir una foto a SVG la mejora. Convertir píxeles en vectores es un trazado que aproxima contornos. No hay una transformación sin pérdidas normalizada, y el resultado no recupera el detalle que la imagen no tenía.

El tercero: un vector se puede editar en cualquier programa. Se puede abrir en cualquier programa que entienda el estándar, que no es lo mismo. Las funciones avanzadas dependen de la implementación.

Cómo repartir el trabajo entre dos editores

La regla práctica es separar por naturaleza del contenido. Las fotografías, las capturas y las imágenes con textura se trabajan en un editor de píxeles, porque el detalle es el contenido. Los logotipos, los iconos, los diagramas y la tipografía se trabajan en un editor vectorial, porque la forma es el contenido.

El Editor de fotos trabaja sobre píxeles, con pila de capas, máscaras y ajustes. El Editor vectorial trabaja sobre trazados Bézier, formas y texto, y exporta SVG, PDF, PNG, JPEG y WebP.

Un flujo razonable combina los dos. La foto se ajusta en el editor de píxeles y se exporta. El logotipo vive en el vectorial y se exporta al tamaño que pida cada soporte. Si el vectorial necesita la foto dentro, se incrusta y se acepta que esa parte se comportará como un raster.

Probar los dos caminos

La prueba que aclara la diferencia en un minuto es coger un icono SVG, exportarlo a PNG a 96 píxeles y ampliar ese PNG al doble en el visor. Después, mostrar el SVG original al mismo tamaño final. Los dos resultados se comparan sin discusión.

Antes de depositar trabajo en el editor vectorial conviene tener presentes sus límites. Esta compilación no incluye fuentes con caracteres árabes, así que ese texto se dibuja como cajas vacías, y el proyecto de origen describe la versión como alfa. Tampoco hay que esperar el comportamiento de un programa de diseño de escritorio.

Si la comparación útil es entre dos contenedores concretos, la guía de SVG vs PNG baja al detalle. Y si lo que hay que decidir es entre dos formatos de píxeles, PSD vs PSB cubre el otro lado. Hay más en la biblioteca de guías.