Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

FORMATOS GRÁFICOSOptimizar imágenes para su uso en la web

Las imágenes optimizadas para su uso en la web deben ser exportadas en un formato que los navegadores reconozcan. Ade-más deben ser lo suficientemente livianas para que su transmisión sea rápida, aún para usuarios con conexiones lentas. Para lograr efectividad en la optimización de imágenes, siempre hay que tener en cuenta que se trata de un balance entre calidad de imagen y peso del archivo.

Existen 2 formatos casi universales para uso en Internet; GIF y JPEG. Hay otros formatos, algunos más robustos como PNG, pero que no son soportados por todos los navegadores y no han sido muy difundidos. La mayoría de las aplicaciones gráficas (PhotoShop, ImageReady, Illustrator, Freehand, FireWorks, etc) permite exportar a todos estos formatos. La decisión de cual elegir depende de las características propias de la imagen.

GIFGIF significa Graphics Intercharge File (archivo para intercambio de gráficos), y fue el primer formato desarrollado especifi-camente para ser utilizado en la web y ser compartido por distintas plataformas. La empresa que encargó su desarrollo fue CompuServe, unos de los primeros proveedores de Internet, hoy absorvida a nivel mundial por AOL.

Un archivo GIF sólo permite mostrar un máximo de 256 colores, y es más apropiado para ilustraciones que contienen grandes superficies de un mismo color y formas gráficas de mucho contraste. La mayoría de los logotipos, textos o botones se salvan en formato GIF porque generalmente no son una imagen fotográfica y mediante este formato pueden conservar los bordes muy definidos.

Además, el formato GIF, tiene otras dos características; primero permite que uno o más colores sean transparentes. Esta transparencia es un poco básica, ya que no permite bordes difusos ni distintos niveles de opacidad, como sí trabajan los Alpha Channels, sólo transparencia de 1-bit. Si no es bien utilizada esta función, se pueden obtener bordes serruchados. La transparencia permite eliminar la naturaleza rectangular que tienen todos los archivos. En segundo lugar, el formato GIF per-mite ser animado, mediando al técnica de sucesión de cuadros. Macromedia FireWorks, Adobe ImageReady e incluso Flash permiten exportar animaciones en GIF. Por lo general los GIF animados suelen ser bastante pesados. Antes de la aparición de Flash, todas las animaciones en la web se hacían a través de un GIF animado, todavía hoy se ocupan en banners y otros elementos menores. La única ventaja del GIF animado es que no requiere la instalación de un plug-ins para ser visualizado en los navegadores.

Otra característica interesante de este formato, es que trabaja con una paleta de colores indexada. Es decir, la cantidad máxima de colores es 256, pero se puede trabajar con cualquier cantidad de colores por debajo de esa cantidad. Por ejem-plo, si tenemos un logotipo diseñado a 3 colores, podemos asignar únicamente esos 3 colores al archivo GIF, reduciendo así su peso y velocidad de transferencia.

Cuando aparecieron los primeros monitores color, la computadoras sólo podían trabajar en 4 o 16 colores. Pasaron los años y 256 colores (8-bit) se convirtió en el estándar. El problema era que esos 256 colores no eran los mismos en Mac que en PC; un GIF se podía ver muy, pero muy diferente según la plataforma. Existen diferentes paletas de colores (la más comun deno-minada Web-Safe, de 216 valores), que se utilizan para compatibilizar esas diferencias. Hoy la mayoría de las computadoras tiene la capacidad de trabajar a 24 bit, millones de colores. La paleta Web-Safe ya casi no se utiliza.

El formato GIF tradicionalmente usa un método de compresión lossless (sin pérdida), no hay información que se descarte a la hora de salvar la imagen. Sin embargo, como el GIF usa un máximo de 256 colores (8-bit), optimizar una imagen fotográ-fica de millones de colores (24-bit) degradará la calidad. Recientemente se ha desarrollado para el formato GIF una com-presión lossy (con pérdida), más parecida a la del formato JPEG, que logra archivos mucho más livianos, aunque con menor calidad.

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

FORMATOS GRÁFICOSOptimizar imágenes para su uso en la web

JPEGEl formato JPEG fue desarrollado por el Joint Photographic Expert Group y, como es de esperarse, es utilizado principalmen-te para comprimir fotografías o cualquier imagen de tono continuo. Los archivos JPEG son capaces de trabajar en millones de colores (de hecho sólo trabajan en 24-bit). Si bien los archivos JPEG son capaces de representar espacios de color en RGB, CMYK o GrayScale, los navegadores aceptan sólo el formato RGB. Este formato, en comparación al GIF, no tiene la capacidad de tener transparencia ni animación. Todos los navegadores soportan este formato desde hace años.

La compresión de las imágenes JPEG es del tipo lossy (con pérdida). Por como trabaja el compresor JPEG, las imágenes de tipo vectorial, tipografías o logotipos no se benefician y suelen perder mucho detalle. La compresión se puede controlar a tra-vés de una escala, que puede ser porcentual de 0% a 100%, o una escala numérica de 0 a 12, como en Adobe PhotoShop. Cuando la compresión es mínima, el resultado final casi no se distingue de la imagen original. Mientras más alto el nivel, mejor es el resultado final, pero más pesado será el archivo. Todos los productos de Adobe y Macromedia tienen excelentes módulos de exportación para optimizar las imágenes, pudiendo incluso ver los resultado final en tiempo real, antes de salvar el archivo.

Una característica interesante del formato JPEG es que se pueden crear archivos progresivos. Los JPEG progresivos se suelen usar en imágenes de cierta resolución, y permiten que el navegador descargue la imagen por pasadas, aumentado la resolu-ción poco a poco, hasta la descarga final del archivo.

Es importante, al trabajar con archivos JPEG, mantener siempre el archivo original sin compresión, ya que si salvamos un JPEG sucesivas veces, la calidad se verá muy afectada de generación en generación.

Existe una versión mejorada de este formato, denominada JPEG 2000. Ofrece mayor calidad en la compresión, compresión sin pérdida, canales de 16-bit, Alpha Channels y Spot Channels. Es un formato apropiado y pensado para trabajar en apli-caciones web, como en aplicaciones para impresión. Seguramente se convertirá en un formato muy popular en los próximos años. Hoy en día los navegadores no soportan este formato de manera nativa, requieren de la instalación de un plug-in adicional.

PNGEl formato PNG (Portable Network Graphics) fue desarrollado teniendo en cuenta lo mejor del JPEG y lo mejor del GIF. Es un formato libre de patentes, por lo cualquier desarrollador lo puede incluir en sus programas. (El formato JPEG requiere el pago de patentes). En realidad existen 2 formatos, PNG-8 y PNG-24. Ambos comparten las mismas características, la diferencia principal es la cantidad de colores en la cual trabajan. El PNG-8 es más parecido al GIF, y el PNG-24 se asemeja al formato JPEG.

Ambos formatos soportan los 2 tipos de compresión, con y sin pérdida, lo que lo hace ideal para cualquier tipo de imagen. Además soportan vectores, transparencias suaves (sin bordes serruchados), colores indexados (como el formato GIF), espa-cios de color RGB, GrayScale, animación y otras funciones más sofisticadas como multicapas (layers). Es un formato gráfico tan completo, que Macromedia lo que elegido como formato nativo para su aplicación FireWorks. Así como Photoshop utiliza el .PSD, FireWorks utiliza el .PNG. El único problema con este formato es que todavía no ha sido del todo implementado por los navegadores, y no ha tenido una aceptación tan rápida como la que se esperaba cuando se lanzó al mercado.

A pesar de esto, es un formato muy superior a sus antepasados GIF y JPEG. Quizás en algunos años se convierta en estándar.

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

FORMATOS GRÁFICOSOptimizar imágenes para su uso en la web

SWFSi bien el formato SWF es propiedad de Macromedia, es un estándar abierto, lo que permite que cualquier desarrollador de software incorpore esta tecnología en sus aplicaciones. Es el tipo de archivo que genera la aplicación Macromedia Flash, pero muchos otros programas también lo hacen, como Freehand, Ilustrator, AfterEffects, etc.

Actualmente la mayoría de los usuarios tiene instalado el plug-in necesario para ver este tipo de archivos (Según Macrome-dia el 98%), lo que hace que sea una tecnología muy difundida en la web. Cada día hay más sitios desarrollados en Flash y constituye mucho más que un simple formato gráfico de animación, como en un primer momento fue pensado. El formato SWF logró que altos niveles de animación e interactividad sean posibles en la WWW.

Es un formato basado en vectores, y fue desarrollado para la creación de archivos escalables y compactos en la web. Como es un formato vectorial, la imagen mantiene su calidad a cualquier tamaño y resolución, es ideal para la creación de ani-maciones y alto contenido interactivo. El formato SWF también soporta imagenes bitmaps, video y audio. Tiene excelente integración con JavaScript y ColdFusion (CFM).

Con el paso de los años el formato SWF ha ido incorporando cientos de funciones nuevas. La versión 7 de este formato, permite reproducir video en streaming, audio en diferentes compresiones, utilizar webcams, desarrollar interfaces gráficas complejas, interactuar con bases de datos, etc. La aplicaciones de este formato son tan variadas, que se han desarrolado hasta pequeñas aplicaciones con él. La versión 2.0 de su lenguaje ActionScript ha ampliado el campo de acción de Flash aún más.

Existe una versión de este formato destinado a telefonía celular, denominado Flash Lite. La última versión es la 1.1 y rápida-mente las distintas compañías fabricantes de teléfonos celulares están adoptando este estándar. Seguramente este formato llevará animación e interactividad a estos dispositivos.

SVGSVG significa Scalable Vector Graphics, Gráficos Vectoriales Escalables. Ha sido desarrollado por Adobe y posee una fuerte integración con XML. A diferencia de los formatos anteriormente mencionados (GIF, JPEG, PNG), que son formatos bitmap, este nuevo formato gráfico está orientado a los vectores, aunque también soporta imágenes del tipo bitmap. Se trata de una tecnología revolucionaria, en algunos aspectos es similar al formato SWF. Los archivos SVG describen imágenes como formas, paths, texto y efectos aplicados en tiempo real; esto brinda la posibilidad de que los archivos mantenga una exce-lente calidad y sean muy livianos. En imágenes vectoriales, se pueden definir varias resoluciones y versiones de una misma imagen ajustada a diferentes dispositivos -como agendas electrónicas o teléfonos celulares- en tiempo real.

El formato SVG está totalmente basado en XML, lo que significa que su contenido es dinámico; por ejemplo se pueden crear imágenes a partir de acciones del usuario o a partir de código JavaScript. Soporta animación, transparencia y audio. Tiene una excelente integración con CCS, ASP, PDF y otros lenguajes.

Actualmente, programas como Adobe Illustrator y Adobe GoLive ofrecen soporte para archivos SVG. Para poder leer archivos SVG, los navegadores requieren tener instalado un plug-in que se puede descargar gratuitamente desde el website de Adobe. Para más información: http://www.adobe.com/svg/

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

FORMATOS GRÁFICOSOptimizar imágenes para su uso en la web

COMPRESIÓN JPEGLa compresión JPEG, siempre reduce la calidad de la ima-gen. Debido a su técnica de compresión, es más efectiva en imágenes de resolución fotográfica o de tono continuo. Cuan-do menor es el índice de compresión, mejor es la calidad final, pero también el archivo es más pesado. A la inversa, cuando mayor es el índice de compresión, la calidad de la imagen disminuye, pero de esta manera se pueden lograr archivos muy livianos.

La mejor manera de obtener archivos JPEG con un buen ba-lance calidad/peso es ir ajustando el índice de compresión y junto con esto ir viendo el cambio en la imagen, además del peso final del archivo JPEG. Macromedia FireWorks o Adobe Photoshop tienen módulos de exportación que facilitan esta tarea, observando los resultado en tiempo real. Además brindan algunas opciones extras.

Archivo original, sin compresión.

Archivo JPEG, comprimido al 70%. La diferencia con res-pecto al original es casi imperceptible.

Archivo JPEG, comprimido al 10%. La degradación de la imagen es muy notable.

La compresión JPEG no es, en general, apropiada para tex-tos. Las letras se ven borrosas y con poca definición.

La compresión JPEG tampoco es apropiada para logotipos o ilustraciones de tipo vectorial.

Universidad Champagnat. Facultad de Informática.Licenciatura en Diseño Asistido. Mención en Diseño Editorial.Tecnología Editorial II: Medios AudiovisualesProfesores: Horacio Duek - Gonzalo Antón

12345

FORMATOS GRÁFICOSOptimizar imágenes para su uso en la web

COMPRESIÓN GIFLa compresión utilizada por los archivos GIF, generalmente no reduce la calidad de imagen. Los archivos livianos GIF se obtienen reduciendo la cantidad de colores (hasta 256) utilizados en al imagen. Incluso si nuestra imagen tiene solamente 12 colores, por ejemplo, sólo se ocupan esos 12 tonos, logrando así un archivo mucho más liviano que si tra-bajamos en millones de colores (24-bit). Debido a la técnica de compresión RLE (run length enconding), los archivos GIF son más efectivos para logotipos, tipografías o imagenes vectoriales. Cuando la imagen tienen grandes superficies de un mismo color, se pueden lograr archivos muy livianos.

Los módulos de exportación de Macromedia FireWorks o Adobe Photoshop tienen una serie de opciones para optimi-zar los archivos GIF. En sitios web que son muy visitados por miles de usuarios en forma simultánea (como un diario o un portal de información), y sobre todo en imágenes que serán bajadas miles de veces por día, es fundamental que los archivos estén muy bien optimizados.

Archivo original, sin compresión.

Archivo GIF, en 256 colores indexados. Como se puede apre-ciar, no es aconsejables para fotografías.

La compresión GIF es, en general, la más apropiada para textos. Las letras se ven níticas y se pueden lograr archivos muy livianos.

La compresión GIF también es apropiada para logotipos o ilustraciones de tipo vectorial. Es importante utilizar la cantidad mínima de colores indexados, siempre y cuando la calidad de la imagen no sea reducida. En el logotipo mostra-do, sólo 2 colores (verde + negro) son necesarios.