Los monitores de los usuarios soportan diferentes formatos de representación, desde una resolución de 640x480 y 256 colores hasta los 1600x1200 y 430 millones de colores. Hay que ofrecer contenido apto para toda esta gama de usuarios, por lo que hay que tener en cuenta a la hora de usar imágenes en las páginas webs el tipo de imágenes que se usan ya que pueden ser vectoriales o mapas de bits, cada una indicada para cubrir un determinado tipo de función. También es importante tener en cuenta el número de colores usados en las imágenes que se ponen en las páginas web, debido al peso y optimización de cara a todo tipo usuarios.
Hay dos tipos de imágenes: las vectoriales y los mapas de bits. Las imágenes de la web pueden ser imágenes de mapas de bits o imágenes vectoriales dependiendo de la necesidad del trabajo a realizar.
Un mapa de bits está compuesto por una matriz de píxeles en la que cada píxel es un punto de la imagen y tiene un valor numérico que corresponde a su color en la imagen. La cantidad de píxeles de la matriz determina la resolución de la imagen.
Las imágenes vectoriales consisten en imágenes realizadas a base de polígonos y son ideales en sitios escalables según resoluciones.
Se le llama profundidad de color a la cantidad exacta de colores diferentes presentes en la imagen. En el caso de una imagen en blanco y negro, el color de un píxel sólo puede tomar dos valores, por lo que tendríamos una profundidad de color de 1 bit.
La cantidad de bits de profundidad de color depende del número de colores que use la imagen, teniendo que una imagen de hasta 2 elevado a n colores tendrá una profundidad de n bits.
El tamaño de la imagen dependerá directamente de la profundidad de color de la misma, y por tanto del número de colores usados en ella.
Para prevenir los casos en los que el usuario no puede representar la totalidad de colores de la imagen a mostrar, la imagen tiene asociada una paleta de colores, que consiste en una tabla de valores de los diferentes colores de la imagen. La paleta de colores va almacenada junto a la información de la propia imagen. Cada píxel contiene un índice que corresponde a una posición de la tabla.
Las imágenes pueden generarse en modo indexado o bien en modo RGB y indexarlas posteriormente. Si se decide indexarlas después de creadas, hay que indicar la paleta que se va a usar para la conversión, bien una paleta predefinida o una paleta adaptativa.
La paleta de colores usada por los navegadores web es la paleta de colores web por defecto. Esta paleta define 216 colores utilizando 6 tonos distintos de rojo, verde y azul repartidos uniformemente desde el #000000 hasta el #FFFFFF en hexadecimal. Los 40 colores restantes se dejan para el S.O. Si un color de una imagen no está presente en la paleta de colores web ha de ser convertido a uno de la paleta produciéndose una desviación de color.
Cada navegador utiliza una técnica distinta de tramado por lo cual
es conveniente ver el aspecto de la imagen en diferentes navegadores web.
Diseño web de Hooping