Mapa de bits (raster) vs. vector: la decisión técnica que define toda tu comunicación visual, de MacPaint (1984) a AVIF (2019)

Un mapa de bits —también llamado imagen raster o bitmap— es una representación digital de una imagen mediante una matriz rectangular de puntos individuales llamados píxeles, donde cada píxel almacena información sobre su color. Cuando los miles o millones de píxeles se ven a la distancia adecuada, el cerebro los interpreta como una imagen continua. Esa lógica simple —imagen = matriz de píxeles con información de color— es la base de prácticamente todas las fotografías digitales, capturas de pantalla, y la mayoría del contenido visual que circula en internet.

La distinción entre raster y vector es probablemente la decisión técnica más fundamental de la comunicación visual digital, y la que más confusión genera entre profesionales no técnicos. Equivocarse —usar raster cuando hace falta vector o al revés— produce problemas concretos y a menudo irreversibles. Este artículo cubre el origen histórico de ambos formatos, las diferencias operativas reales, y cómo decidir bien según contexto.

El origen del raster: de los CRT a MacPaint

La idea de representar imágenes mediante matrices de puntos se remonta a los inicios de la informática gráfica. Ivan Sutherland, en su tesis doctoral de 1963 en MIT (Sketchpad: A Man-Machine Graphical Communication System), estableció muchos de los conceptos fundamentales de gráficos por computadora, aunque su trabajo se centraba más en gráficos vectoriales que en raster.

Los primeros sistemas raster comerciales aparecieron en los años 70 con tubos de rayos catódicos (CRT) que dibujaban imágenes mediante haces de electrones que iluminaban píxeles uno por uno. Bell Labs, Xerox PARC, y otros laboratorios trabajaron con sistemas raster a lo largo de los 70.

El momento que llevó el raster al gran público fue el lanzamiento del Apple Macintosh el 24 de enero de 1984. El Mac venía con dos aplicaciones que demostraban capacidades gráficas previamente inéditas en computadoras personales: MacPaint y MacWrite. MacPaint fue desarrollado por Bill Atkinson, uno de los ingenieros legendarios del equipo Mac original. Atkinson había desarrollado también QuickDraw, el sistema gráfico subyacente del Mac, y MacPaint demostraba su potencia: edición de imágenes raster con herramientas (lápiz, brocha, balde de pintura, formas, gomas) que se han mantenido conceptualmente similares hasta hoy en cualquier editor de imágenes.

MacPaint trabajaba en blanco y negro a 1 bit por píxel (cada píxel era encendido o apagado), con resolución de 576×720. Por las limitaciones de hardware de la época, eso era estado del arte. Pero el modelo conceptual —editar una matriz de píxeles con herramientas que afectan regiones rectangulares o irregulares— fue establecido para todas las décadas siguientes.

Photoshop: febrero de 1990

El siguiente hito histórico es Adobe Photoshop, que cambió radicalmente el universo de la edición de imágenes raster. La historia es bien conocida: Thomas Knoll, estudiante de doctorado en la Universidad de Michigan, escribió en 1987 un programa llamado Display para mostrar imágenes en escala de grises en un Macintosh Plus. Su hermano John Knoll, que trabajaba en Industrial Light & Magic, vio el programa y lo encontró útil. Los hermanos Knoll trabajaron juntos para extenderlo a una herramienta más completa de edición.

En 1988, Thomas Knoll firmó un acuerdo con Adobe para que la empresa distribuyera el programa, y el 19 de febrero de 1990 Adobe lanzó Photoshop 1.0 para Macintosh. La versión inicial costaba 895 dólares y solo funcionaba en Mac. Versiones para Windows llegarían en 1993.

Photoshop transformó industrias enteras. La fotografía profesional, el diseño editorial, la publicidad, la producción audiovisual, la edición digital — todas adoptaron Photoshop como herramienta estándar a lo largo de los años 90 y 2000. La frase "to photoshop something" entró al inglés común como verbo. La capacidad de manipular imágenes raster de manera invisible —retocar, componer, alterar— tuvo consecuencias culturales que siguen debatiéndose tres décadas después (estándares de belleza inalcanzables, deepfakes antes de los deepfakes, manipulación periodística).

A partir de 2003, Adobe lanzó la suite Creative Suite (CS) y desde 2013 Adobe Creative Cloud (CC) en modelo de suscripción. Photoshop sigue siendo, en 2026, el editor de imágenes raster más usado por profesionales del diseño.

El otro mundo: vector, Warnock, Illustrator (1982-1987)

Paralelamente al desarrollo del raster, otra tradición se construía: los gráficos vectoriales, donde las imágenes no se representan como matrices de píxeles sino como fórmulas matemáticas que describen líneas, curvas y formas.

John Warnock y Charles Geschke habían trabajado juntos en Xerox PARC en los 70, donde desarrollaron un lenguaje gráfico llamado InterPress. Frustrados porque Xerox no comercializaba sus innovaciones agresivamente, dejaron Xerox y fundaron Adobe Systems en diciembre de 1982. La primera contribución comercial de Adobe fue el lenguaje PostScript, desarrollado entre 1982 y 1984.

PostScript era un lenguaje de descripción de páginas: en lugar de enviar una imagen rasterizada a la impresora, se enviaba una descripción matemática de qué dibujar (líneas, curvas, texto, regiones rellenas), y la impresora —si tenía intérprete PostScript— rasterizaba localmente a la resolución máxima del hardware. Era revolucionario: documentos escalables, fuentes nítidas a cualquier tamaño, gráficos vectoriales puros.

En enero de 1987 Adobe lanzó Illustrator 1.0 para Macintosh. Illustrator usaba PostScript como modelo subyacente y permitía a diseñadores crear gráficos vectoriales editables. La curva Bézier (descubierta por Pierre Bézier para automoción Renault en los 60, formalizada matemáticamente por Paul de Casteljau a la vez en Citroën) se convirtió en la herramienta fundamental del diseño vectorial.

A lo largo de los 90 y 2000, Illustrator y PostScript dominaron el mundo del diseño vectorial profesional, especialmente en identidad visual, packaging, ilustración, y diseño editorial.

La diferencia técnica fundamental

Para tomar decisiones sobre cuándo usar uno u otro, conviene entender qué hace cada uno técnicamente:

Raster (mapa de bits). La imagen es una matriz de píxeles. Cada píxel guarda valores de color (típicamente RGB con 24 bits de profundidad: 8 bits por canal, 256 niveles cada uno, 16,7 millones de colores posibles). Hay también canales alfa para transparencia (32 bits con alpha). El tamaño del archivo depende de la cantidad de píxeles y el método de compresión.

Vector. La imagen es una colección de instrucciones matemáticas: "línea recta de A a B con grosor X y color Y", "curva Bézier con puntos de control C1, C2, C3", "rectángulo con esquinas redondeadas relleno de color Z", etc. El archivo no contiene píxeles; contiene fórmulas.

Las consecuencias prácticas son fundamentales:

Escalabilidad. Una imagen vectorial se puede escalar a cualquier tamaño sin pérdida de calidad — el sistema recalcula las fórmulas a la resolución necesaria. Una imagen raster pierde calidad si se amplía: los píxeles se hacen visibles, las curvas se ven escalonadas. Si se reduce, parte de la información se descarta.

Tamaño de archivo. Para imágenes complejas como fotografías, el raster es más eficiente (almacenar millones de fórmulas que describen una foto sería absurdo). Para imágenes simples como logos, el vector es mucho más ligero (un logo puede pesar 5 KB en SVG y 500 KB en PNG con resolución decente).

Edición. En vector, cada elemento es independiente y editable (cambiar color de una forma, mover un punto de control). En raster, editar implica modificar píxeles directamente, y los cambios pueden ser irreversibles si se guardan.

Apropiado para... Vector funciona excelentemente para: logos, iconos, ilustraciones de líneas y formas, tipografía, infografías. Raster funciona excelentemente para: fotografías, screenshots, texturas, imágenes con degradados complejos y detalles fotorealistas.

Conversión. Se puede convertir vector a raster (rasterizar) sin pérdida si se elige resolución suficiente. Convertir raster a vector (vectorizar) es difícil y casi siempre requiere intervención manual o aproximaciones.

Los formatos raster modernos: una guía honesta

Hay una proliferación de formatos raster que conviene mapear. Cada uno tiene contextos donde es óptimo:

JPG (JPEG). Estándar JPEG estandarizado por la ISO en 1992 (Joint Photographic Experts Group, fundado en 1986). Compresión con pérdida (descarta información imperceptible para reducir tamaño). Excelente para fotografías. Mal para gráficos con bordes nítidos (artifacts visibles). No soporta transparencia.

PNG. Portable Network Graphics, estandarizado en 1996 como respuesta al patente sobre el formato GIF. Compresión sin pérdida. Soporta transparencia (canal alfa). Mejor que JPG para gráficos con bordes nítidos, peor que JPG para fotografías (archivos más pesados). Profundización en la elección JPG vs PNG en PNG vs JPG para imagen.

GIF. Graphics Interchange Format, creado por CompuServe en 1987. Limitado a 256 colores por imagen. Soporta animación simple, transparencia binaria (sí/no, sin grises). Sigue usándose para animaciones cortas pese a sus limitaciones. Pronunciación todavía debatida.

WebP. Formato lanzado por Google en 2010 y madurado a lo largo de la década siguiente. Compresión más eficiente que JPG y PNG para tamaños comparables. Soporta transparencia y animación. Ampliamente soportado en navegadores modernos. Adoptado por Google para reducir tamaño de páginas web.

AVIF. AV1 Image File Format, especificado por la Alliance for Open Media en 2019. Compresión todavía más eficiente que WebP para muchos casos, especialmente en imágenes complejas. Mayor calidad a tamaño comparable. Soporte en navegadores ha crecido significativamente desde 2021-2022 y en 2026 es ampliamente soportado pero no universal.

HEIC/HEIF. High Efficiency Image File Format, formato basado en H.265/HEVC. Adoptado por Apple desde iOS 11 (2017) como formato por defecto de fotos en iPhone. Excelente compresión pero soporte limitado fuera del ecosistema Apple, lo que ha generado problemas de interoperabilidad para usuarios no-Mac.

TIFF. Tagged Image File Format, formato de los 80 que sigue siendo estándar en industria editorial e impresión profesional por su capacidad de almacenar imágenes sin pérdida en alta profundidad de color (16 bit por canal o más).

BMP. Formato de Windows desde los 80. Sin compresión típicamente. Archivos grandes. Casi obsoleto en uso profesional.

RAW. No es un formato único sino familia de formatos específicos por fabricante de cámara (Canon CR2/CR3, Nikon NEF, Sony ARW, etc.). Captura datos sensor brutos sin procesar. Permite edición sin pérdida de la información original. Estándar en fotografía profesional.

Los formatos vectoriales modernos

SVG (Scalable Vector Graphics). Estándar W3C desde 2001. XML-based, editable como texto, soportado nativamente en navegadores web. Es el estándar para vector en la web. Perfecto para logos, iconos, ilustraciones simples.

EPS (Encapsulated PostScript). Formato derivado de PostScript de los 80. Sigue usándose en imprenta y trabajo profesional, especialmente para activos que llegan a producción de imprenta tradicional.

PDF. Portable Document Format, lanzado por Adobe en junio de 1993. Originalmente concebido como formato de documentos pero capaz de almacenar tanto raster como vector. En 2008 se convirtió en estándar ISO (ISO 32000-1).

AI (Adobe Illustrator). Formato propietario de Adobe Illustrator. Actualmente basado en PDF.

Sketch, Figma, Affinity Designer. Herramientas modernas con sus propios formatos nativos. Figma (lanzado 2016, ahora propiedad de Adobe tras adquisición anunciada 2022 que se canceló por antitrust en 2023, finalmente Figma sigue independiente) ha cambiado significativamente el flujo de diseño UI dejando los archivos en la nube.

Cuándo usar raster, cuándo usar vector

La decisión tiene reglas concretas con poca ambigüedad:

Usa vector (preferentemente SVG) cuando:

• El elemento debe escalar a tamaños muy distintos (logo en favicon, en tarjeta, en valla publicitaria de 6 metros).
• Es un logo, icono, ilustración de líneas y formas sólidas.
• Necesitas archivo ligero para web.
• Quieres editar elementos individualmente más adelante.
• El elemento debe imprimirse a alta resolución.

Usa raster cuando:

• Es una fotografía o tiene alto fotorrealismo.
• Hay degradados complejos, texturas, efectos de fotografía.
• Es captura de pantalla o screenshot.
• El tamaño final es conocido y no necesita escalar.

Para web específicamente, en 2026:

• Fotografías → AVIF si está soportado por el navegador (con WebP como fallback, JPG como segundo fallback).
• Logos e iconos → SVG.
• Capturas de pantalla → WebP o PNG.
• Gráficos animados → WebP animado, vídeo MP4 cuando es razonable, GIF solo cuando no hay otra opción.

Para imprenta:

• Logos y elementos de marca → vector (preferentemente AI o EPS para imprentas tradicionales, SVG para imprentas modernas).
• Fotografías → TIFF para máxima calidad, JPG de alta resolución como compromiso aceptable.

Resolución y tamaño: las decisiones que casi nadie explica bien

Aquí hay confusión generalizada que merece párrafo propio:

Píxeles totales. Cantidad absoluta de píxeles en la imagen (ancho × alto). Es la información fundamental.

Resolución (DPI/PPI). Densidad de píxeles por unidad de longitud. Solo importa cuando se va a imprimir o mostrar a tamaño físico específico. Para web pura, el DPI es irrelevante — lo que importa son los píxeles totales y el tamaño en CSS.

Tamaño físico. El tamaño en centímetros o pulgadas a la que se quiere mostrar. Junto con resolución, determina los píxeles necesarios.

Profundidad de color (bit depth). Cuántos bits por canal de color. 8 bits es estándar (256 niveles); 16 bits es estándar profesional (65.536 niveles); 32 bits HDR para casos especiales.

Las relaciones prácticas:

• Web pantalla normal: 72 DPI nominal, lo importante son píxeles totales suficientes para el contenedor en CSS. Para pantalla retina/HiDPI, hace falta 2x los píxeles del contenedor.
• Imprenta calidad estándar: 300 DPI a tamaño final.
• Imprenta gran formato (vallas, posters grandes): 100-150 DPI a tamaño final, suficiente porque la distancia de visualización es mayor.

Las imágenes mal dimensionadas son fuente típica de fricción: imágenes web innecesariamente pesadas que ralentizan páginas, imágenes para imprenta enviadas con resolución insuficiente que llegan pixeladas, imágenes redimensionadas mal con interpolación que pierde detalle.

Errores comunes en imágenes raster

Confundir resolución de pantalla con calidad. "La imagen se ve bien en mi pantalla" puede no significar que tiene resolución suficiente para su uso final.

Guardar versión final como JPG y descartar el original. El JPG comprime con pérdida. Cada vez que se reedita y reguarda, la calidad cae. Hay que mantener originales (PSD, TIFF, RAW) y exportar JPG/PNG/WebP solo para distribución final.

Aumentar resolución artificialmente con interpolación. Photoshop puede "agrandar" una imagen pequeña, pero los píxeles añadidos son inventados. La calidad no aumenta realmente.

Usar PNG cuando JPG sería más eficiente. PNG sin pérdida es excelente para gráficos con bordes; para fotografías es archivo varias veces más grande sin ganancia perceptual.

No optimizar para web. Imagen sacada de cámara tiene 24 megapíxeles y pesa 8 MB. Subirla directamente a web sin redimensionar y comprimir produce páginas lentas. Optimizar imagen es trabajo básico que muchos sitios siguen haciendo mal.

No considerar pantalla retina/HiDPI. Pantallas modernas tienen densidad de píxeles 2x-3x mayor. Imagen con 1x se ve borrosa. Hay que servir imágenes 2x con srcset o equivalente.

Confundir mapa de bits con vector solo por la extensión. Un PDF puede contener tanto vector como raster. Que sea PDF no garantiza que sea vectorial. Hay que verificar con la herramienta apropiada.

Convertir vector a raster prematuramente. Una vez que conviertes un logo vectorial a PNG, perdiste la capacidad de escalar libremente. Mantener el vector original es básico.

No documentar licencias. Imágenes de stock con licencias específicas pueden tener restricciones (uso editorial vs comercial, atribución requerida). No documentar produce problemas legales después.

Mapa de bits y operaciones creativas

Para una marca que produce comunicación visual regularmente, la gestión de imágenes es problema operativo significativo. Originales en alta calidad, exportaciones por canal, versiones por idioma, versiones aprobadas vs en revisión, vinculación con campañas — sin sistema de gestión, los activos se duplican, se pierden, se usan versiones incorrectas en piezas finales, y cada nueva pieza tiene fricción de búsqueda donde debería tener acceso instantáneo.

Esa coordinación es disciplina de operaciones creativas: la producción de contenidos genera y mantiene activos visuales, la gestión de marca define qué versiones son canónicas y cómo se etiquetan, los flujos de aprobación garantizan que solo activos aprobados se distribuyen.

En Polimake esa lógica vive en tres superficies: Studio para coordinar producción visual con campañas, Studio para producir variantes y exportaciones por canal, Media específicamente como el lugar donde imágenes —en sus formatos nativos editables, en sus versiones exportadas por canal, con metadatos y permisos claros— viven accesibles para todo el equipo.

---

Si trabajas en marketing, diseño, comunicación o cualquier rol que produce contenido visual y has llegado aquí buscando una respuesta sobre mapa de bits, lo más útil que puedes llevarte de este artículo es probablemente la regla operativa que casi todos los manuales sobre el tema enturbian: fotos → raster, logos → vector. Esa simplificación cubre el 80% de las decisiones cotidianas. El otro 20% requiere matiz: gráficos con bordes nítidos en raster suelen necesitar PNG, fotos de alta calidad para imprenta necesitan TIFF o RAW, y para web moderna, AVIF y WebP están desplazando a JPG y PNG en sitios optimizados.

Para complementar, PNG vs JPG para imagen cubre la decisión más común dentro del mundo raster, corregir el color cubre la postproducción que se aplica sobre raster, y cómo hacer mejor fotografía de comida cubre un caso de uso específico de raster con consideraciones técnicas concretas.

Referencias rápidas

• PNG vs JPG para imagen — la elección dentro de raster.
• Corregir el color — la postproducción aplicable a raster.
• Cómo hacer mejor fotografía de comida — caso de uso específico.
• Producción de contenidos — gestión de activos visuales a escala.
• Gestión de marca — qué versiones son canónicas.