Utilice Photoshop 5.5 para que sus gráficos sean más ligeros y sus páginas web más rápidas

Empaquetar demasiadas imágenes de gran tamaño en una página web es una de las formas más seguras de alejar a los visitantes. Las imágenes que se han guardado en el formato incorrecto o están poco comprimidas pueden hacer que la velocidad de carga de la página sea insufrible. Por este motivo un elemento clave del diseño de un web es la optimización de los botones, imágenes y otros gráficos antes de publicar su espacio web.

Aunque parezca extraño, el programa más conocido de edición de imágenes (Adobe Photoshop) ha sido históricamente poco apto para la optimización de imágenes para su uso en la Web. Al no tener una interfaz eficiente para la compresión óptima de imágenes, los diseñadores han tenido que instalar extensiones especiales o utilizar otros programas de tratamiento de imágenes, como Fireworks de Macromedia o ImageReady de Adobe, diseñados específicamente para construir páginas web.

Con Photoshop 5.5, Adobe ha corregido muchos de los problemas relativos a este área en su producto estrella. Una nueva opción denominada “Save for Web” le permite hacer una vista previa, aplicar optimizaciones y guardarlas en los formatos utilizados en las páginas web: JPEG, GIF y PNG. Además, Adobe incluye ImageReady 2.0 con Photoshop, no siendo necesario el adquirir dos aplicaciones para realizar tratamiento de imágenes de alto nivel a la vez que dispone de facilidades para el desarrollo en web (vea el cuadro “Optimización con piloto automático” para aprender algunos trucos de ImageReady). Teniendo unos conocimientos básicos de cómo funciona la compresión de imágenes, incluso los principiantes serán capaces de crear páginas con imágenes con Photoshop que se descarguen rápidamente.

Estándares de compresión

Los estándares de compresión de imágenes sacan partido al hecho de que definir una imagen utilizando fórmulas matemáticas puede ser mucho más eficaz que describir cada uno de sus píxeles de forma individual. Es lo mismo que si se define un cuadrado verde como “un rectángulo verde de diez por diez pixels” en lugar de decir “un pixel verde, otro pixel verde, otro pixel verde” y así sucesivamente. Los esquemas de compresión a menudo reducen el espacio requerido para almacenar una imagen en un noventa por ciento e incluso más. Si desea ver una comparación de la compresión que ofrecen los diferentes formatos de imagen, consulte el cuadro “Formatos: comparación de compresiones”.

Los diferentes tipos de compresión de imágenes emplean fórmulas diferentes para comprimir la información, y cada uno tiene sus ventajas e inconvenientes. Afortunadamente no es necesario ser un matemático para seleccionar el mejor formato para las imágenes de sus páginas.

Si su imagen es una fotografía, probablemente quiera guardarla como JPEG, ya que este formato puede manejar millones de colores en una imagen y además es el mejor comprimiendo imágenes que tienen cambios continuos de tono. El principal inconveniente es que realiza una compresión con pérdida, lo que significa que se pierde algo de información cuando se guarda una imagen como JPEG. Esta pérdida de información se muestra como pequeñas imperfecciones que pueden multiplicar su intensidad si se comprime repetidamente la imagen con este formato. Al guardar una imagen en JPEG se puede seleccionar la cantidad de compresión que se aplica. Esto implica decidir cuantas imperfecciones está dispuesto a permitir a cambio de un menor tamaño de la imagen. La opción “Save for Web” le permite ajustar la compresión y ver el resultado comparado con la imagen original. (Esta comparación era una de las ventajas de emplear Fireworks e ImageReady).

Si realmente quiere comprimir sus fotografías, “Save for Web” le permite añadir ruido gausiano a las imágenes antes de guardarlas. El formato JPEG da mejores resultados con tonos continuos, por lo que si se suavizan las transiciones con la herramienta de difuminado mejorará la compresión.

El otro tipo de imágenes con las que trabajan de forma habitual los diseñadores de páginas web son las ilustraciones con transiciones bruscas y grandes áreas de color plano. Estas se almacenan mejor como GIF (o como PNG, formato que se explica más adelante). Los GIF están limitados a un máximo de 256 colores, lo que normalmente es suficiente para ilustraciones con colores planos pero no para muchas fotografías.

El estándar GIF no tiene pérdidas, lo que significa que no se pierde información durante el proceso de compresión. Sin embargo, un nuevo ajuste de pérdida en Photoshop 5.5 le permite incrementar la compresión eliminando información antes de guardar la imagen como GIF. (Para conocer más en profundidad este tema, vea el cuadro “Poner los GIF a dieta”).

La parte más importante al optimizar la compresión en el formato GIF es disminuir el número de colores de la imagen tanto como sea posible (una de las opciones de “Save for Web”). Los botones con colores planos y otros gráficos similares se almacenan en muchas ocasiones con 32 colores o menos y aun así se ven bien. Otras de las funciones de “Save For Web” le permiten decidir como se selecciona la paleta de colores GIF y si se realiza difuminado, parámetros que pueden influir en el tamaño de la imagen (aunque en menor medida).

Un vistazo a PNG

La opción “Save for Web” (Guardar para la Web) también le permite almacenar una imagen como PNG (pronunciado “ping”). PNG es el formato de compresión menos empleado, principalmente debido a que es nuevo y el soporte para él en los navegadores es irregular. (Explorer 4.5 para Mac no lo soporta y Navigator 4.5 de Netscape sí lo acepta, pero no tiene incorporadas todas sus opciones).

La principal ventaja del formato PNG es que puede soportar millones de colores al igual que JPEG pero no tiene pérdidas, al igual que el formato GIF. Por tanto, a menudo genera archivos de más calidad que un GIF aunque ligeramente más grandes en términos de bytes. Otras ventajas son su posibilidad de almacenar información de gamma para compensar la diferencia en el brillo de la pantalla a través de diversos sistemas operativos y transparencias parciales.

Probablemente el formato PNG esté soportado en su totalidad en la versión 5.0 de los navegadores, lo que les dará a los diseñadores más razones para utilizar el formato PNG al optimizar las imágenes de sus páginas web.

Formatos: comparación de compresiones

-----------------------------------------------------------

Los tres formatos de imágenes disponibles en la opción “Save For Web” (Guardar para la Web) e Photoshop 5.5 comprimen la información de los píxeles utilizando diferentes fórmulas matemáticas, y cada fórmula produce resultados distintos en función de la propia imagen. A continuación se dan los tamaños originales y comprimidos de estas dos imágenes: fotográfica y de colores planos.

El formato JPEG es la clara elección para imágenes fotográficas. Aunque este sistema emplea diversas técnicas matemáticas para ahorrar espacio, la más importante es l