Laura Chuburu

Cursos web 2012

Curso de diseño web

Curso de CSS + JQuery

Curso de web marketing

Curso de web dinámicas (PHP y MySQL)

Curso de diseño web - Apuntes

Optimizar imágenes :

En internet se utilizan dos tipos de imágenes de mapas de bits: los archivos .gif y los .jpg. También se puede utilizar el formato PNG pero IExplorer no lo muestra correctamente. Cualquier imagen se puede guardar en cualquier formato, pero sólo uno de ellos va a lograr una mejor compresión del archivo (más liviano), esa es la mejor razón para elegir el formato.

JPG

El formato JPG es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable (calidad 50, 60, 70 en Fireworks). Cuanto menos contraste tenga la imagen, más compresión se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho más liviano.

GIF

El formato GIF comprime mejor las imágenes con plenos de color como los dibujos vectoriales, botones, títulos, etc. A diferencia del JPG, este formato reduce la paleta a 256 colores como máximo. En el momento de guardar una imagen como gif, los más importante es decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.

Paletas de color:

El formato GIF permite elegir una paleta de color a la que se ajustará la imagen exportada. Si la imagen original tiene menos de 256 colores, se puede utilizar la paleta exacta de manera que el archivo exportado utilice los mismos colores del documento original.
Si la imagen original tiene más de 256 colores o si se desea reducir el peso del archivo, se utiliza la paleta adaptable. Es una paleta de colores personalizados que se crea a partir de los colores del archivo original. Esta opción permite reducir la cantidad de colores. Si por ejemplo la imagen original tiene 160 colores, se puede exportar en paleta adaptable indicándole un máximo de 128, de esta manera -si la calidad es aceptable- se logra reducir el peso de la imagen exportada.

Pérdida y tramado:

Al exportar una imagen en formato GIF también se puede asignar un valor de pérdida. Cuanto más alto este valor, más liviano será el archivo exportado. El tramado en cambio aumenta la calidad del archivo y su peso, cuanto más alto el valor del tramado, más pesado el archivo exportado.

Transparencia:

Los archivos GIF permiten seleccionar áreas transparentes en el momento de exportar. La imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados) o suavizados con halos de color diferente al fondo. Para esto se utiliza la opción Mate que permite seleccionar (tanto en Fireworks como en Photoshop) el color similar al fondo. Este color no se aplica en la imagen original PNG o PSD.

Exportar una imagen desde Fireworks:

1- Con la herramienta de división se dibuja sobre el archivo PNG un rectángulo que delimitará las dimensiones del archivo para exportar.
2- En la ventana Propiedades definir un nombre de división que será el nombre del archivo exportado. No debe tener espacios ni caracteres especiales.
3- En la ventana Optimizar seleccionar el formato GIF o JPG y definir la calidad, paleta, cantidad de colores, etc.
4- En la vista previa se puede ver el peso que tendrá la imagen exportada
5- Con el botón derecho sobre la división hacer clic en Exportar división seleccionada. Indicar una carpeta dentro del sitio web. El archivo se guardará con el nombre de división en el formato elegido.

 

Ultima actualización de este apunte: noviembre 2007

Laura Chuburu - Diseñadora en Comunicación Visual UNLP - DISEÑO WEB
lchuburu@yahoo.com.ar / Tel: 221 427-5619 / Cel: 221 15 538-8940 / 53 Nº 610 of. 5 (e/ 7 y 8) La Plata - Buenos Aires