Imágenes y paginas web

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas web.

En la elaboración de páginas web se utilizan principalmente imágenes de tipo mapas de bits, concretamente los formatos gráficos GIF, JPG y PNG. Son sistemas de almacenar imágenes pensados para minimizar el tamaño que ocupan en disco manteniendo una calidad aceptable. Lo primero facilita la transmisión de archivos gráficos, mientras que lo segundo hacen que las imágenes sean útiles. HTML 5 soporta perfectamente un formato vectorial SVG.


Imagen GIF	Imagen JPG	Imagen PNG

GIF (Graphics Interchange Format)

Este formato nació en el año 1987 de la mano de Compuserve con objeto de colorear sus imágenes, hasta entonces codificadas en su formato RLE en blanco y negro. La versión original (GIF87a) fue sustituida por la GIF89a. Actualmente existe un problema de licencias que desaconseja su uso en favor del formato PNG. Sus características más importantes son:

Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad.
Se utiliza principalmente para imágenes de colores planos, o sea, grandes manchas de color homogéneo, sin variación cromática, al modo de los dibujos infantiles.
Permite "transparencias", es decir, seleccionando uno de los colores de la imagen éste se vuelve transparente, permitiendo ver a través de él cualquier fondo, o imagen que esté situada detrás.
Permite, con el programa adecuado, crear animaciones presentando varias imágenes una tras otra como si de un "dibujo animado" se tratara.
Utiliza una paleta de 256 colores como máximo, lo que nos permite elegir entre varios tamaños para un mismo archivo.

JPG o JPEG (Joint Photographic Expert Group )

Es el formato más utilizado para la transmisión de fotografías, nació en el año 1986. Es un formato muy recomendado para imágenes con una amplia gama de colores y que permite ajustar el grado de compresión y por tanto la calidad de la imagen.
Sus características más importantes son:

Es un formato de compresión con pérdida: aligera el tamaño final del archivo, pero le resta calidad.
Se utiliza principalmente para incluir en la web fotografías con un elevado número de colores (trabaja con un formato de 16 millones de colores).
No permite definir colores transparentes.
No permite crear animaciones.
Con el formato JPG, podemos escoger el grado de compresión, de manera que cuanto mayor sea la compresión mayor es la pérdida de calidad de la imagen.
Codifica los colores con 24 bits, por lo uqe puede manejar una paleta de más de 16 millones de colores, lo que se llama color verdadero.

PNG (Portable Network Graphics)

es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color y otros importantes datos. Sus características principales son:

Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad.
Soporta formato de color indexado (256 colores) y profundidades de color de 48 bits y escala de grises de 16 bits.
Permite colores transparentes y transparencias graduales
No permite crear animaciones, existe un formato relacionado para animaciones, pero está poco extendido: MNG.
El usuario puede elegir el formato a usar en la codificación de la imagen: PNG8 (análogo al GIF) o PNG24 (24 bits de color)

SVG (Scalable Vector Graphics)

Se trata de un formato gráfico que no se basa estrictamente en mapas de bits sino en el diseño vectorial, es decir, el gráfico es creado in situ en base a un algoritmo de dibujo. Los gráficos se definen por formas geométricas como circle() o rectagnle(). Sus características principales son:

Es un formato sin pérdidas respecto al original.
Soporta formato de color de 48 bits.
Permite transparencias graduales (opacidad)
Permite crear animaciones mediante instrucciones de programa.
Puede ser ampliado sin pérdida de calidad.
Pierde sus beneficios para imágnes tipo fotografía.
Está orientao a imágenes geométricas.

Observaciones

A la vista de todo lo anterior, cuando integremos imágenes en nuestra página deberíamos tener en cuenta lo siguiente:

Debemos analizar detalladamente el uso de imágenes en nuestra página. Hemos de fijarnos en su necesidad, resolución, tamaño, formato, etc. El objetivo es lograr que la página se cargue lo más rápidamente posible.
El tamaño del archivo de imagen depende de las dimensiones de la imagen y del número de colores que la forman.
Para colores puros con no más de 256 colores y gráficos muy simples usaremos el formato GIF o PNG.
Para imágenes con más de 256 colores usaremos el formato JPG o PNG24.
Usar las imágenes con su tamaño real, evitando que sea el navegador el encargado de reducirlas.
No colocar demasiadas imágenes en una misma página. Si necesitamos mostrar un numero elevado de imágenes, lo mejor es usar una versión muy reducida de las mismas (thumbnails o miniaturas) a modo de índice y enlazar con páginas individuales donde se muestre cada imagen por separado.
Al diseñar la estructura del sitio utilizar una carpeta para las imágenes muj usadas a lo largo de las diferentes páginas del sitio.
Usar el atributo ALT en las imágenes, para facilitar la comprensión del contenido a los usuarios y a los robots usados por los buscadores para indexar nuestra página.