Módulo 2: Elementos básicos para el diseño web. Bitmaps y vectores

Antes de abrir cualquier programa de diseño, hay una distinción que tienes que tener clarísima: no todas las imágenes se construyen de la misma forma. Un logotipo y una fotografía de producto no son solo «dos imágenes distintas», son dos tipos de dato completamente diferentes por debajo, y confundirlos es la causa número uno de logos pixelados en pantallas grandes o fotos que pesan más de lo que deberían.

#Qué es una imagen bitmap (mapa de bits)

Una imagen bitmap, también llamada raster, está formada por una rejilla de pequeños puntos de color llamados píxeles. Cada píxel guarda su propia información de color, y la suma de todos ellos, vistos desde cierta distancia, es lo que tu ojo interpreta como una imagen.

Cuantos más píxeles tenga la imagen en la misma superficie, mayor será su resolución y más detalle podrá mostrar. El problema aparece cuando quieres ampliar esa imagen más allá de su tamaño original: el programa tiene que «inventarse» información para rellenar los huecos, y ahí es donde aparece el efecto de pixelado que seguro ya has visto alguna vez.

#Qué es una imagen vectorial

Una imagen vectorial no se construye con píxeles, sino con fórmulas matemáticas. En lugar de guardar el color de cada punto, guarda coordenadas, ángulos y curvas: puntos de inicio, puntos finales, radios, grosores de línea y colores de relleno.

La gran ventaja de este sistema es que la imagen se recalcula cada vez que cambias su tamaño, así que puedes ampliarla todo lo que quieras sin que pierda nitidez ni aparezca el pixelado típico de un bitmap. Por eso es el formato de referencia para logotipos: un logo vectorial se ve igual de limpio en una tarjeta de visita que en una lona publicitaria de varios metros.

#Diferencias clave entre bitmap y vector

xml

#Cuándo usar cada uno en diseño web

La regla práctica es sencilla: si el elemento tiene detalle realista (una fotografía de plato, una textura, una persona), usa bitmap. Si el elemento es gráfico y plano (un logo, un icono, una ilustración con formas definidas), usa vector.

• Fotografías de producto o ambiente: siempre bitmap (JPG o PNG)
• Logotipo de la marca: siempre vectorial, y expórtalo también a PNG para poder subirlo a la web
• Iconos de la web (redes sociales, menú, flechas): vectorial, idealmente en formato SVG, que es el único formato vectorial que los navegadores interpretan de forma nativa
• Banners con texto e imagen mezclados: normalmente se exportan como bitmap final, aunque se diseñen combinando ambos tipos

#Resolución y tamaño: por qué importa en diseño web

En bitmap, la resolución se mide en píxeles por pulgada (PPI) o directamente en el número total de píxeles de ancho y alto. Para pantalla, no necesitas la misma resolución que para impresión: una imagen pensada para imprimir en papel puede pesar innecesariamente mucho si la subes tal cual a una web, ralentizando la carga de la página.

En vectorial, el concepto de resolución no existe de la misma forma: al no depender de píxeles, el archivo se adapta matemáticamente a cualquier tamaño de pantalla sin que tengas que preocuparte por versiones distintas.

#Formatos que debes conocer sí o sí

• JPG: el más usado para fotografías, comprime bien pero pierde algo de calidad cada vez que se guarda
• PNG: permite transparencia, ideal para logos sobre fondos de color o superposición de elementos
• SVG: vectorial nativo de la web, ligero y escalable, perfecto para iconos y logos en cualquier sitio web moderno
• GIF: limitado en colores, pero útil para animaciones simples

Con esta base ya puedes tomar decisiones informadas sobre qué formato pedir o exportar según el elemento con el que estés trabajando. El siguiente paso lógico es meterte con la composición y jerarquía visual, donde vas a combinar estos elementos (fotos, iconos, logos) dentro de una misma página siguiendo unos principios de diseño concretos.

Cuestionario: Módulo 2
xml

#Cuestionario: Módulo 2