Uno de los recursos más atractivos que ofrece el HTML es que permite incluir elementos gráficos y sonoros que enriquecen la información. Ahora bien, tanto unos como otros suelen emplear bastante tiempo en descargarse completamente, por lo que habrá que manejarlos con prudencia y recurrir a las técnicas necesarias para minimizar su tamaño.  

A lo largo de las páginas precedentes han ido apareciendo referencias a la inclusión de imágenes en las páginas HTML. De hecho podemos dar por sabido el procedimiento básico para insertar una imagen. Veremos pues el tipo de imágenes que podemos utilizar y algun truquillo para acelerar la carga de las páginas. 

La división en seis bloques se ha realizado para facilitar la navegacion y distribuir los contenidos en segmentos relacionados:

• Conceptos generales sobre la imagen
• Formatos gráficos para la WEB
• Utilidades para el tratamiento de imágenes
• Insertar imágenes con Composer
• Insertar imágenes con Front Page Express
• Líneas. El truco de la imagen fantasma

¿Cómo se construye la imagen en la pantalla del ordenador?

Podríamos considerar la pantalla del ordenador como un panal formado por celdas cuadradas. Cada una de esas celdas recibirá una determinada estimulación electrica de las partículas de fósforo que la componen que hará que presente un color u otro.

Si ampliamos una zona de la imagen podemos apreciar claramente las celdas que componen la imagen. Estas celdillas reciben el nombre de píxeles.

Partiendo de esta idea básica vamos a ver los elementos que condicionan el tipo de imágenes que aparecen en nuestra pantalla:

Tipos de imagen

A grandes rasgos podríamos dividir las imágenes digitales en dos grandes grupos:

• Imágenes raster o vectoriales, en las que la información de cada uno de los puntos se recoge en forma de ecuación mátemática que lo relaciona con el resto de los puntos que forman la imagen. Ofrecen la gran ventaja de que la calidad de la imagen no varía al modificar el tamaño, ya que la información de cada punto no es absoluta sino relativa al resto de la imagen. Además, debido a su definición matemática apenas ocupa espacio, ya que una fórmula que represente su forma es suficiente para representar todos los puntos que la componen. Es el tipo adecuado para el diseño de línea y figura y no es soportado de forma directa por los programas navegadores de Internet.



• Imágenes de mapa de bits o bitmap que, tal como nos sugiere su nombre se construyen describiendo cada uno de los puntos que componen la imagen y llevan, por tanto, información acerca de la posición absoluta y el color de cada uno de ellos. Podríamos decir que cada punto sería la tesela de un mosaico con sus propias características. La ventaja que presenta este formato es la posibilidad de recoger una amplísima gama tonal, por lo que es el tipo adecuado para representar imágenes captadas de la realidad. A cambio, la variación de tamaño supondrá modificaciones en la calidad, ya que el número de celdas que forman la imagen permanece invariable, por lo que un aumento del tamaño hace que el único recurso posible sea ampliar el tamaño de cada una de ellas. Podemos deducir por lo dicho anteriormente que su tamaño es muy grande, ya que aquí sí que tenemos información de cada uno de los puntos que forman la imagen. Dentro de este tipo se encuentran muchos formatos, algunos de los cuales son soportados directamente por los navegadores, siendo pues el tipo de imágenes con las que vamos a trabajar en el curso.

Resolución del monitor

A grandes rasgos la resolución del monitor viene determinada por dos variables:

• El tamaño de la "celda", al que se denomina pitch dot y que en los monitores actuales es, habitualmente, de 0,28 mm. Dado que la imagen que vemos está compuesta por puntos adyacentes de diferentes colores, cuanto más pequeños sean dichos puntos obtendremos una mayor sensación de continuidad.
  
  
• El número de puntos que es capaz de enviar a la pantalla la tarjeta gráfica del ordenador. Este parámetro depende de la cantidad de memoria de la que disponga la tarjeta para hacer los cálculos necesarios y de la propia capacidad de la pantalla para representar la información recibida. Cada pareja de tarjetas gráfica y monitor es capaz de presentar un rango de resoluciones, cuya elección queda a criterio del usuario. Actualmente la resolución más habitual es de 800 puntos horizontales por 600 puntos verticales, mientras que en los equipos precedentes se situaba en 640x480 puntos.

La variación del número de puntos o píxeles influirá en el tamaño relativo de las imágenes dentro de la pantalla. Si establecemos que nuestra pantalla va a ser un mosaico de 800 x 600, una imagen que ocupe un rectángulo de 640x480 píxeles que se situara a partir del vértice superior izquierdo, dejaría libre una franja a su derecha y otra en la parte inferior. Si pretendemos mostrar esa misma imagen en una pantalla con una resolución de 640x480 la llenará por completo. La imagen no ha variado de tamaño, lo que se ha modificado es el tamaño de cada una de las "baldosas" que componen el mosaico.

Resolución de la imagen

Es un concepto relacionado con el anterior y recurriremos a un ejemplo práctico para explicarlo.

Supongamos que disponemos de un escáner para capturar una imagen. introducimos sobre la bandeja una foto cuyo tamaño es de 10 x 15 cm (aproximadamente unas 4 x 6 pulgadas)

Inicio el trabajo de captura y como mi escáner me lo permite capturo la imagen a 300 puntos por pulgada. Eso quiere decir que por cada pulgada real de foto, el escaner se encargará de pintar 300 puntos en la imagen electrónica. Un simple cálculo me hace darme cuenta de que mi imagen formará un rectángulo de 1200 x 1800 píxeles una vez escaneada.

¿Cabrá la imagen en la pantalla? Está claro que no, porque lo más lógico es que mi pantalla esté configurada para mostrar 800 puntos de anchura y 600 de altura que es bastante menos de lo que necesitamos.

Si hubiera escaneado la imagen a una resolución de 96 puntos por pulgada habría conseguido una imagen de 284x576 píxeles cuyo tamaño en pantalla sería muy similar al tamaño físico de la imagen. Esto se debe a que el monitor es capaz de presentar en una pulgada real un total de 96 puntos de luz cuando está a una resolución de 800x600. Si hemos escaneado a esa resolución el tamaño del papel coincidirá con el de la pantalla.