GUIA 3 Tema: Optimización de imagenes y recursos para la web.

Transcripción

1 22 GUIA 3 Tema: Optimización de imagenes y recursos para la web. Objetivos Que los alumnos comprendan la importancia de la optimización de imágenes para la Web y utilicen Adobe Fireworks como editor de imágenes y generador de contenido para la Web. Contenidos La importancia de la optimización de imágenes Gráficos para la Web Introducción a Adobe Fireworks Materiales y Equipo Guía 3 previamente leída. Hoja de evaluación correspondiente a la guía 3. Storyboard para un banner Web animado. Elementos gráficos para realizar el banner web. La Importancia de la Optimización de Imagenes Generalmente, las imágenes representan entre el 60 y 80% del contenido de un sitio web, el porcentaje restante corresponde a lenguaje de programación (HTML, CSS, java, entre otros). La premisa anterior, se traduce en que el componente gráfico es de vital importancia dentro de un sitio. Si recordamos los principios de la usabilidad, nos encontramos con la idea de que un sitio Web debe cumplir con tres aspectos fundamentales resumidos en el siguiente esquema: Eficacia Satisfacción Eficiencia La Usabilidad implica: eficacia, es decir, que el visitante consiga lo que buscaba. También Satisfacción al navegar por la web y eficiencia al conseguir lo que quiere rápidamente.

2 Diseño Digital V. Guía 3 23 Esto se resume en que el cliente puede estar satisfecho de navegar en nuestro sitio con solo encontrar lo que buscaba, sin embargo, esta idea a veces no es suficiente sino lo encuentra rápidamente. La rapidez de carga de un sitio está determinada por diversas situaciones como la cantidad de imágenes utilizadas o los recursos flash como: banners, animaciones, videos, etc. Pero más que la cantidad de imágenes o recursos visuales utilizados, la variable realmente influyente en el tiempo de carga de un sitio es la calidad y el peso de las imágenes o recursos. Muchas veces los sitios Web con altos atractivos visuales tardan mucho tiempo en cargar, lo que puede derivar en pérdida de clientes, usuarios y negocios importantes. Un sitio Web puede contener tanto recurso visual como sea posible, el problema como anteriormente se menciona no es la cantidad, sino la calidad de este material. Por esta razón el concepto de optimización es casi uno de los más importantes, dentro de la usabilidad al diseñar para la Web. Básicamente la optimización consiste en obtener una imagen lo menos pesada posible con la mejor calidad. Imagenes y gráficos para la Web Las imágenes son una parte importante de la Web. De hecho, la mayoría de las páginas Web distribuyen su espacio entre texto e imágenes. Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender la temática de la que se habla. Los formatos de imágenes Web más usados son.gif,.jpg y.png, a continuación se detalla cada uno de ellos: GIF GIF es el acrónimo de Graphic Image File Format. Fue desarrollado para el intercambio de imágenes en Compuserve y tiene como particularidad que el algoritmo de compresión es propietario, aunque se permite el uso a cualquier persona. Las características de esto formato son: Número de colores: 2, 4, 8, 16, 32, 128 ó 256 de una paleta de 24 bits. Animación simple. JPEG JPEG es el acrónimo de Joint Photographic Experts Group. Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de

3 24 captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información. Las características de este formato son: Número de colores: 24 bits color o 8 bits B/N No permite trasparencia, ni canal alfa. No permite animación. PNG PNG es el acrónimo de Portable Network Graphics. Fue diseñado para reemplazar al formato GIF por ser este último más simple y menos completo. El objetivo de este formato es proporcionar un formato compresión de imágenes sin pérdida para cualquier tipo de imagen. Las características de este formato son: Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel. Canal alfa. (Transparencia variable) No permite animación. Las imágenes para la web pueden ser optimizadas y guardadas en cualquiera de los tres formatos expuestos anteriores, sin embargo deben tener una resolución máxima de 72 dpi, y modo de color RGB. El tipo de formato a escoger va a depender del objetivo a cumplir por la imagen. Así por ejemplo si la imagen posee colores planos el formato gif puede ser el más recomendable, pero si se trata de una imagen con mucho color y detalles, el formato jpg puede ser el más indicado por su alta compresión y mínima perdida de calidad. Ejemplo de la compresión en los diferentes formatos visto desde Adobe Fireworks CS5: JPG GIF PNG

4 Diseño Digital V. Guía 3 25 El peso recomendado de una imagen para la web puede variar sin embargo con un peso entre 5kb-30kb se obtendrá un optimo funcionamiento en la web. Otro aspecto a tomar en cuenta son los gráficos animados; si bien es cierto que los recursos flash ofrecen una calidad y vistosidad excepcional, el peso de los.swf muchas veces no resulta óptimo para ser utilizados en la Web. Se recomienda que los recursos flash tengan un peso entre 70kb y 120 kb. Si a pesar de las opciones de optimización y compresión que flash ofrece al publicar el SWF no se obtiene un peso dentro de este rango, existen otras opciones como los gif animados, que aunque no son visualmente tan complejos como los archivos de flash, pueden dar solución al dinamismo que se necesita en web. Entre las ventajas que ofrecen los gif animados, podemos enumerar las siguientes: No necesita plugins para correr Es compatible con todos los navegadores Carga rápidamente Se tiene control sobre el peso del gif animado Existen diversos software como Adobe PhotoShop y Adobe Fireworks que ofrecen al usuario la optimización imágenes así como crear animaciones sencillas para ser utilizadas en la Web. Adobe Fireworks Adobe Fireworks es un programa versátil para crear, editar y optimizar gráficos Web. Entre las ventajas de Fireworks es que permite crear y editar imágenes de mapa de bits y vectoriales, diseñar efectos Web, como rollovers y menús emergentes, recortar y optimizar elementos gráficos para reducir su tamaño de archivo y automatizar tareas repetitivas para ahorrar tiempo. Es posible exportar o guardar un documento como un archivo JPEG, un archivo GIF o un archivo de otro formato. Estos archivos pueden guardarse junto con archivos HTML que contengan tablas HTML y código JavaScript para facilitar su uso en Internet. Optimización de imágenes de Adobe Fireworks Adobe Fireworks permite además de editar y crear gráficos, optimizar imágenes. La ventaja de Fireworks es que permite al usuario poder previsualizar la imagen optimizada en diferentes ventanas, cada una de ellas con especificaciones distintas de formato, paleta de color, calidad, etc. De manera que se puedan comparar diferentes opciones de optimización de una sola imagen y poder escoger la

5 26 que presente una mejor calidad con el mínimo peso, tal como se muestra a continuación: Interfaz de trabajo Adobe Fireworks CS5 Como se observa en la imagen anterior, Fireworks previsualiza en cuatro o dos ventanas, las diferentes opciones de optimización de una misma imagen. Debajo de la previsualización, que es la forma en la que la imagen se verá en el navegador, aparece el formato de archivo, el peso y el tiempo de descarga en el navegador, además de la paleta de colores en el caso de los formatos GIF y PNG, o el porcentaje de calidad, en el caso del formato JPG. Con los botones de la vista previa puede cambiar las opciones de previsualización a modo dos copias, modo 4 copias o una sola vista previa. Gif animados en Adobe Fireworks Una animación GIF está formada por una serie de imágenes fijas que aparecen de forma consecutiva a gran velocidad, lo que permite percibirlas como una imagen en movimiento. Al crear una animación en Adobe Fireworks, cada imagen se sitúa en un fotograma distinto. A continuación, todas las imágenes de una animación se exportan en un archivo GIF animado. Hacer un GIF en Fireworks es similar a la animación cuadro a cuadro de Flash, es decir, que se deben crear todos los fotogramas de la animación.

6 Diseño Digital V. Guía 3 27 Para crear la animación cuadro a cuadro en Adobe Fireworks se utiliza el panel de estados, que hasta la versión CS3 se denominaba fotogramas : Panel de Estados A. Papel cebolla B. Bucle de animación GIF C. Distribuir en estados D. Estado Nuevo/ Duplicado E. Eliminar estado. Imagen en el Estado 1 Imagen en el Estado 2 B C Imagen en el Estado 3 AD A E Panel Estados Adobe Fireworks CS5 Como se menciona anteriormente, Las animaciones se producen creando estados, cuyo contenido aparece en el panel Estados. Se puede asignar un nombre a cada estado, reorganizarlos, establecer de forma manual los tiempos de animación y mover objetos de un estado a otro. Ya en el proceso de animación, existen diversas maneras de crear los estados, una forma puede ser: traer cada uno de los cuadros desde Photoshop o si lo prefiere, puede crear imágenes vectoriales en Fireworks y modificarlas en cada estado. Una vez realizada la animación, se exporta el GIF, tomando en cuenta que en el panel de optimización debe escoger la opción de GIF Animado.

7 28 Procedimiento Basado en el boceto del banner web, y los gráficos que previamente diseñó coloque los elementos en el archivo nuevo de fireworks. 1. Si trae los cuadros de su animación en capas acopladas, haga clic en el botón distribuir en estados del Panel de Estados. Si va a realizar la animación con objetos vectoriales, deberá agregar estados y hacer las modificaciones que considere pertinentes. 2. Disponga las especificaciones de bucle de animación y exporte el GIF, tomando en cuenta las opciones predeterminadas de optimización. 3. Guarde el PNG, junto con el GIF Animado en su carpeta personal. 4. Realice en una misma imagen la optimización en JPG 50%, PNG 24 bits y GIF 16 colores, guarde una captura de pantalla de cada formato ejercicio y entregue al instructor la hoja de cotejo correspondiente a la guía 3.