Artículo sobre Contribute

Conversión de imágenes en gráficos web exitosos

Si bien añadir texto a páginas web es algo sencillo —sólo una cuestión de introducirlo con un producto como Macromedia Contribute— los usuarios también van a querer agregar fotografías, gráficos o logotipos. Eso ya no es tan sencillo. Pero éstas son algunas sugerencias que le podrían resultar útil a los usuarios para ayudarles a añadir imágenes a sus sitios web sin crear desastres visuales.

La frase "una foto vale mil palabras" es un cliché, pero en el web las imágenes sí requieren mucho más tiempo para descargar que el texto. Una pequeña imagen de 6K equivale a mil palabras, de manera que los contribuyentes a sitios deberían usar las imágenes con moderación o bien, podrían correr el riesgo de fastidiar o alejar a los lectores mientras esperan que se descarguen las imágenes.

Afortunadamente, hay maneras de minimizar el tamaño de los archivos de gráficos web. De igual manera que los muebles que vienen desarmados* o una lata de sopa condensada, las imágenes se pueden "comprimir" de manera que sean pequeñas mientras están en tránsito pero se "reconstituyen" a su estado original (o casi a su estado original) cuando aparecen en el navegador.

Para comprimir un archivo de imagen, simplemente se tiene que guardar en el formato de archivo correcto*; el navegador se encarga del resto. Hay dos formatos de archivo principales que hacen esto, especialmente para gráficos web; el que se debe usar depende de la imagen.

Antes de comprimir una imagen, sin embargo, debe cambiarle el tamaño en un programa de edición de imágenes de manera que tenga el tamaño final que se desea para la página web. No es una buena idea dejar que el navegador ajuste la escala de las imágenes porque eso puede comprometer el tamaño del archivo y demorar la presentación de la página. La imagen original siempre debe ser inicialmente más grande de lo necesario antes de reducirla. Al ampliar una imagen demasiado pequeña nunca se logran buenos resultados porque los detalles simplemente no están ahí para comenzar y no se pueden generar.

Agregar fotografías con el formato JPEG

Para poder poner una fotografía en una página, tiene que encontrar algo adecuado en una biblioteca de fotos. De lo contrario, deberá digitalizar una transparencia o una impresión, o tomar una foto con una cámara digital. La imagen original puede haberse guardado en una gran variedad de formatos de archivo (TIFF, PNG, PSD), según la cámara y el software. El mejor formato de archivo para usar para fotografías en el web es JPEG, que tiene la extensión .jpg. La manera en que el formato JPEG comprime el archivo es bastante complicada, pero lo único que necesita saber es que se sacrifica calidad de imagen por archivos más pequeños. El formato JPEG es un formato "con pérdida", lo que significa que siempre se pierde algo de la calidad de la imagen en el proceso de compresión del archivo de imagen.

Una imagen JPEG de alta calidad tiene un archivo de tamaño grande, un JPEG de baja calidad tiene uno de tamaño pequeño. En algún lugar entre estos dos extremos hay un tamaño de archivo óptimo que tiene un aspecto casi igual al original. Esto lo tendrá que juzgar al ojo. Por lo general se tiene que hacer una previsualización de la calidad de la imagen en un programa de edición de imágenes y hacer ajustes con un control deslizable*. A medida que se reduce el tamaño del archivo y la calidad, aparecen imperfecciones antiestéticas ("artefactos de compresión") en áreas de color plano y alrededor de los bordes de los objetos. Cuando comienzan a aparecer éstos, reduzca un poco la compresión. Cuando casi no se ven artefactos de compresión, ha llegado al límite de compresión sin sacrificar la calidad visual.

A continuación verá algunos ejemplos de esto:

Este archivo de un CD de fotos tenía originalmente unos 62K. Con una cantidad mediana de compresión, reduje el tamaño a 15K, algo mucho más fácil de manipular. Hay una pérdida imperceptible de calidad.

Esta versión está mucho más comprimida a 6,5K pero la pérdida de calidad es evidente, sobre todo alrededor de los bordes de las nubes.

A un máximo de compresión, el tamaño del archivo es de unos 5K pero la calidad es muy mala. Si se tiene en cuenta que es sólo unos 1,5K más pequeño que la imagen anterior, es evidente que hay que encontrar un equilibrio preciso entre el tamaño del archivo y la calidad.

Una vez que encuentre el tamaño de compresión ideal para sus fotos, no olvide guardar a mano una copia del archivo original sin comprimir en el formato de archivo nativo del programa de edición. Cada vez que se cambia el tamaño o se vuelve a guardar un archivo JPEG, se agrega más "pérdida", lo cual hará que la imagen se vea peor, y probablemente también aumente el tamaño del archivo.

Agregar imágenes de color plano con el formato GIF

Para logotipos y otras imágenes que contienen colores mayormente planos y sin gradaciones (sin sombras, por ejemplo), la mejor opción es usar el formato GIF (.gif). (Algunas personas pronuncian GIF como "yiff", pero quiere decir Graphic Image Format, de manera que la G debería sonar como en la palabra "gráfico".) El formato GIF no es conveniente para imágenes fotográficas o ilustraciones con muchas mezclas sutiles de color. De hecho, cuanto menos colores individuales haya en la imagen, más pequeño será el GIF.

Permítame mostrarle. Si se guarda en formato GIF con un tamaño de archivo comparable a la imagen JPEG óptima, esta foto muestra cómo la imagen está "posterizada" en áreas de color plano; las gradaciones sutiles se pierden por completo:

Para minimizar este efecto de bandas, es necesario guardar el archivo con una profundidad de color mucho más alta, o bien activar el "tramado," lo que significa simular las gradaciones con diseños de puntos de colores que ya están presentes. Esta imagen no sólo es más grande que el equivalente en JPEG, pero también se ve peor.

Los GIF funcionan como sigue. En lugar de recordar el color de cada uno de los pixeles en una imagen, el formato GIF simplemente cuenta el número de pixeles del mismo color en una fila. Por ejemplo, en el mundo real ¿acaso no es mucho más eficiente decir "en esta caja hay 12 lápices rojos, 5 lápices azules y 1 lápiz amarillo" que decir "éste es un lápiz rojo, éste es un lápiz rojo, éste es un lápiz rojo..." etc.? Fundamentalmente, los GIF cuentan las "series" de un solo color, y reemplazan el valor total por los valores de cada pixel individual. Esto es mucho más eficiente, y compacto, que la compresión JPEG.

La decisión que debe tomar con los GIF es la siguiente: "¿cuánto es el mínimo de colores que necesito?" Si digitaliza un logotipo azul en un fondo blanco y le cambia de tamaño para que entre bien en el espacio que tiene en la página web, deberá seleccionar una profundidad de color (o profundidad de bits) para la imagen. Esto determina la cantidad de colores que se utilizan para presentar la imagen. La profundidad de color más pequeña posible es de dos colores (un color de primer plano y un color de segundo plano), pero esto pixela el logotipo y resulta en bordes duros e irregulares. Con cuatro colores, los bordes comienzan a verse mejor pero siguen estando un poco irregulares. Con ocho colores ya se ven bastante suaves. El uso de más de ocho colores para un logotipo de un solo color es poco probable que mejore la calidad de la imagen de manera apreciable y sólo aumenta el tamaño del archivo innecesariamente.

Lo que sucede aquí es que la imagen se mezcla de manera suave desde el primer plano azul al segundo plano blanco utilizando varios tonos intermedios de azul. Por lo general es suficiente con ocho pasos tonales, pero si el logotipo tiene más de un color, se recomienda tener un número equivalente de pasos para los otros colores también. El número máximo de colores que puede tener una imagen GIF es 256, pero una imagen de 256 colores tiene un archivo de tamaño mucho más grande que una de sólo 8 colores.

Y ahora otro ejemplo. Los siguientes ejemplos del logotipo de Jasmine muestran el efecto relacionado con reducir el número de colores de una imagen. Aunque las letras sólo son de un color con un borde suave, el logotipo incluye un loro de muchos colores con una gradación suave. Es vital reproducir las letras de color plano y conservar los colores sutiles del pájaro:

Este GIF de 256 colores reproduce la imagen muy bien pero el tamaño del archivo es 4,4K.

Al reducir a 128 colores, se ve muy poca diferencia, pero el tamaño del archivo se reduce a 3,62K.

A 64 colores, la imagen sigue siendo perfectamente aceptable y el tamaño del archivo se ha reducido a 2,87K. Posiblemente esto sea lo mejor que se puede hacer con este logotipo en particular.

Con 32 colores, a 2.37K, la mezcla sutil de colores en el ala superior se ha separado en tres áreas distintas.

Más reducción a 16 colores reduce las sutilezas aun más. Si encuentra que esto es aceptable, ésta podría ser una representación aceptable del logotipo, y el archivo ahora tiene un tamaño de sólo 1,94K.

Incluso con sólo ocho colores (1,5K), todavía se puede reconocer el loro. Observe también que las letras están intactas. Hay suficientes colores para tener un borde suave.

Al reducirlo a sólo cuatro colores, el archivo tiene un tamaño de sólo 1,14K pero el loro ahora es muy básico y las letras tienen un aspecto irregular feo porque no hay suficientes colores para mezclarlo gradualmente con el fondo. Observe también que se ha perdido el color amarillo de la imagen.

Obviamente, dos colores no es suficiente para reproducir esta imagen y un archivo de 0,76K es ridículamente pequeño. Sólo se pueden usar dos colores para rectángulos sencillos.

Al guardar el logotipo en un JPEG de tamaño similar al GIF óptimo (2,54K) se puede ver lo poco adecuado que es el formato JPEG para este tipo de imagen. Los JPEG no funcionan bien con los colores planos.

Hacer un color transparente de GIF

Una cosa que se puede hacer con los GIF, pero no con los JPEG, es designar uno de los colores como transparente. Un color transparente permite que se vea el color del segundo plano. Esto es muy útil si la página web tiene un fondo con textura o con dibujos. Es necesario tener un poco de cuidado, sin embargo, porque si la imagen original se encuentra sobre un segundo plano blanco y luego se pone en una página con fondo azul, no se verá bien. Puesto que los tonos intermedios a lo largo del borde de las letras cambian gradualmente a blanco en lugar de azul, el resultado es un halo blanco alrededor de las letras.

Para que esto funcione correctamente, primero se debe colocar la imagen en el programa de edición de imágenes sobre el color de fondo deseado para la página web final y luego convertir ese color de segundo plano en transparente*. Si el segundo plano es una textura o un dibujo, se puede usar el color dominante o "promedio".

Esto es lo que quiero decir:

Convertir el segundo plano blanco de este logotipo en transparente (izquierda) y luego poner la imagen en un segundo plano azul no funciona. A medida que los bordes de la imagen se gradúan al blanco, crean un halo en un fondo azul (derecha).

Acá la imagen original estaba en un segundo plano azul que convertí en transparente en el programa de edición de imágenes (izquierda), para darle la mezcla correcta de bordes, llamada "suavizado" (derecha).

Conservar el tamaño reducido de los archivos (y de las páginas)

Una vez establecido que los archivos de gráficos individuales deben ser lo más pequeños que se pueda, sigue que la cantidad de archivos en una página también es importante. Si se reduce el tamaño de archivo de una fotografía a 10K pero pone 10 en una sola página web, el tamaño total de la página crecerá a más de 100K, que podría causar problemas a menos que todas las visitas de su sitio tengan conexión de banda ancha.

En condiciones óptimas, que en realidad son muy escasas, una página de 100K toma entre 15 y 20 segundos para descargar en un navegador con un módem de marcación típico de 56 kbps, que es demasiado tiempo. Cuando las páginas se demoran más de 10 segundos en cargar, las personas pronto pierden interés y se van a otro lado. El tamaño máximo de una página, incluido todo el texto y las imágenes, debería ser de aproximadamente 50K (que se puede descargar en 7 a 10 segundos a 56 kbps). Y menos es mejor.

Las pruebas de tiempo de carga de páginas web en su máquina o a través de la red local nunca le darán resultados realistas. Lo que cuenta es lo que ve la persona que navega en el web. Antes de activar una página, es necesario visualizarla desde un sistema portátil o un equipo de escritorio conectado al web a través de un módem normal. Entonces lo que se ve es lo que en realidad se obtiene.

---

Acerca del autor
Joe Gillespie es un consultor de nuevos medios basado en Londres. Desde 1996 ha publicado Web Page Design for Designers*, un sitio dedicado a los aspectos más creativos del diseño web. También diseña fuentes de pantalla para diseñadores web, tales como la clásica MINI 7*.