MODULO 3 MANEJO DE IMAGENES.
OPTIMIZACION

COMO OPTIMIZAR IMAGENES

Al diseñar una web, la primera prioridad es reducir el tiempo de descarga de archivos al mínimo. Para determinar un tamaño aceptable de una página web, los profesionales centran su atención en los últimos miembros privilegiados de su público objetivo, usuarios con módems lentos (14.4 kbps). Ellos recibirán una página a casi 1K por segundo. Por esto, la mayoría de los diseñadores trabajan muy duro para mantener las páginas por debajo de los 40K (es decir 40K para todo el texto, gráficos y códigos HTML de formato!).
Lo que hace posible lo anterior es la compresión de imágenes. La tecnología de compresión permite que las imágenes sean comprimidas de manera considerable antes de su transmisión, y que se restauren de nuevo dentro del navegador del usuario.
Por esto es interesante conocer algo sobre los diferentes formatos gráficos para web. A continuación, aunque sin entrar en demasiados detalles técnicos, nos centraremos en los aspectos prácticos.
Hoy en día existen multitud de formatos gráficos. Cada formato gráfico se suele utilizar en un entorno diferente, pero no existe un formato que se pueda utilizar de forma universal. Así pues, dependiendo del uso que vayamos a dar a nuestras imágenes, nos interesará guardarlas en uno u otro formato. Los elementos principales que hay que tener en cuenta a la hora de trabajar con formatos son la relación entre calidad y tamaño del archivo, las características del formato y la compatibilidad entre el formato del fichero y los programas que vayamos a utilizar.
Generalmente los archivos gráficos ocupan mucho espacio, una imagen fotográfica de resolución media suele ocupar entre 0,2 y 1 MB. por esto la mayoría de los formatos gráficos utilizan métodos de compresión para ahorrar espacio. Dependiendo del grado de compresión utilizado, el ahorro en espacio será mayor o menor. Pero en general, al descomprimir la imagen se pierde algo de calidad, y cuanto mayor es el grado de compresión, mayor es la pérdida de fidelidad de la imagen descomprimida respecto de la imagen original.

Sobre la resolución está todo dicho: basta con 72 dpi. El tamaño de la imagen dependerá, evidentemente, de su tamaño y del grado de detalle que queramos mostrar. Debemos tener en cuenta que para una imagen de gran tamaño (por ejemplo, toda la pantalla), el tamaño puede ser muy grande y se hace imprescindible adoptar estrategias de optimización. A veces puede ser conveniente dividir la imagen en partes, optimizarlas al máximo por separado y preparar una tabla que muestre, aparentemente, una imagen única intacta.

División de una imagen

La división de un elemento gráfico es tan sencilla como dibujar un rectángulo. Los programas de edición de imagen especializados en web como Fireworks o Photoshop, disponen de una herramienta para dividir imágenes. La podemos encontrar como herramienta Slice, o herramienta División. Los objetos que se crean se denominan 'objetos de división'. Las líneas rojas en unos, o azules en otros, que sobresalen de los objetos de división son las guías de la división, determinan el punto en que el programa dividirá la imagen en archivos independientes durante la exportación. Esta herramienta también es usada cuando necesitamos optimizar cada área de la imagen de forma independiente, esto es: con distinto formato, efecto de rollover, link, etc.
Para dibujar un objeto de división rectangular:
1 Elija la herramienta División / Slice.
2 Arrastre para dibujar el objeto de división.
Estas divisiones se vuelven a ensamblar en una página Web mediante una tabla HTML.

Para exportar objetos con divisiones en Fireworks:
1  Seleccionamos las divisiones de los objetos que necesitamos
2  Archivo > Exportación especial > Capas/Fotogramas en archivos
3  Aparecerá el cuadro de diálogo Exportar.
4  En el cuadro de diálogo Exportar elegimos un método de división:
La opción Ninguna evita que se divida al exportar, incluso si dibujamos objetos de división en el documento.
La opción Utilizar objetos de división exporta divisiones definidas en los objetos de división.
Divisiones/ Fotograma actual exporta divisiones definidas por los objetos de división, pero sólo imágenes a partir del fotograma actual.
La opción Dividir siguiendo las guías exporta divisiones definidas por las guías existentes.
5   En el cuadro de diálogo Exportar, elegimos un destino y las opciones HTML, por último, hacemos clic en Guardar (Windows) o Exportar (Macintosh).

Cada división se exporta con los ajustes de optimización individuales definidos para cada división del panel Optimizar.

Para exportar objetos con divisiones en Photoshop:
1  Seleccionamos las divisiones de los objetos que necesitamos
2  Archivo > Salvar para web  
3  Aparecerá el cuadro con las distintas opciones de optimización, para toda la imagen o para cada  división por separado.
4  Seleccionamos OK, y por último hacemos clic en guardar.

Cada división se exporta con los ajustes de optimización individuales definidos para cada división del panel Optimizar.