Tipos de imágenes para una web

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse.

Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.

Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La imagen solo se mostrará correctamente en el navegador.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

Optimización de una imagen

Es posible optimizar una imagen insertada en un documento abierto en Dreamweaver, a través de Fireworks. De este modo puede modificarse el formato de la imagen, la transparencia, la paleta de colores que utiliza, etc.

Al modificar estos valores, lo que se pretende es que la imagen ocupe menos memoria.

Para optimizar una imagen desde Dreamweaver hay que seleccionar la imagen, y seguidamente dirigirse al menú Comandos, opción Optimizar imagen en Fireworks.

Desde la nueva ventana será posible modificar los atributos de la imagen.

Transparencias

En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de una imagen. Normalmente lo que se desea hacer transparente es el fondo.

Por ejemplo, en la imagen de la derecha el fondo puede desentonar con el fondo de la página, o hacer que su apariencia sea más pobre.

Lo primero que hay que hacer es establecer un color de fondo para la imagen, de modo que éste no coincida con el color de ningún otro elemento del dibujo, para que éste último pueda seguir mostrándose correctamente después de aplicar la transparencia.

Después podrá aplicarse la transparencia sobre el color deseado, desde algún programa de tratamiento de imágenes, como puede ser Fireworks.

Una forma de aplicar transparencia mediante Fireworks es a través de los botones que puedes ver en la pantalla anterior (en optimizar imagen).

Cuando se está optimizando la imagen, puede pulsarse uno de los dos primeros botones anteriores, de modo que el puntero adquiere la forma de un cuentagotas al situarse sobre la imagen o sobre la lista de colores de la imagen. Pulsando sobre un color, éste se volverá transparente.

La diferencia entre el primer y el segundo de estos botones, es que el primero solo permite asignar transparencia a un color, mientras que el otro permite añadirsela a varios. El último botón se utiliza para quitar la transparencia de algún color.

En el caso de haber aplicado la transparencia al color azul que hacía de fondo de la imagen, esta quedaría como la de la derecha.

La existencia de transparencia permite mejorar notablemente la estética de nuestras páginas.