| Artículos | 01 ENE 1999

Afinando con los gráficos

Tags: Histórico
Técnicas y trucos de diseño en Internet
Ramón Montero.

En un anterior artículo titulado ?Gráficos: GIF & JPEG? se realizó una introducción al tratamiento de los gráficos en las publicaciones web, pero aunque lo comentado en él era imprescindible para poder aprovechar sus características, no era, ni mucho menos, un estudio completo de todas sus posibilidades . Toca ahora que ampliemos un poco más los conocimientos sobre sus posibilidades, aunque sigan existiendo más asuntos para comentar sobre el tema en otros futuros artículos de esta misma serie .

El perfecto control de los gráficos e imágenes que soportan las páginas web precisa tanto del conocimiento de técnicas de diseño como del mayor entendimiento de los procedimientos de lenguajes de programación ( HTML, JavaScript, JAVA, VisualBasic, VRML y otros ) , pero también exige conocer con detalle las características técnicas de los formatos de posible utilización .

Existe un extensa bibliografía dedicada exclusivamente a explicar el tratamiento de las imágenes a través de Internet, también se comercializan múltiples aplicaciones especializadas en el diseño de los ciber-gráficos, e incluso entre los diseñadores gráficos se está creando una especialidad dirigida al sector del diseño de los web-sites . Todo esto nos permite entender la gran importancia que supone la parte gráfica de las páginas web .

Y aún así, con lo dicho en los párrafos anteriores no es suficiente, ya que sólo a través del estudio de los innumerables ejemplos que podemos encontrar en nuestras incursiones por Internet, es posible sacar el máximo rendimiento a los gráficos . De algunas de estas cuestiones trata el siguiente artículo .

Los nuevos formatos

Es de sobra conocido que los formatos gráficos más utilizados en Internet son GIF y JPEG, siendo cada uno de ellos más adecuado para diferentes casos ( ver el artículo ?Gráficos: GIF & JPEG? ) . Estos formatos ya existían antes de generalizarse el uso de Internet, y como suele ocurrir cuando sale una nueva tecnología, se recurrió a ellos porque eran los que mejor solucionaban los problemas de la Red . No obstante, desde el año pasado, está disponible la nueva especificación PNG ( se lee ?ping? ) que resuelve de una sola vez, y más eficazmente, casi todos los problemas que se puedan plantear habitualmente . PNG significa ?gráficos de red transportables? ( Portable Network Graphics ) y ha sido creado específicamente para Internet, incluyendo las mejores características de GIF y JPEG . Como ocurre con GIF, PNG ofrece compresión sin pérdida de información, color indexado y control de transparencia, pero también admite color de 24 bits y carga entrelazada, tal como permite JPEG . Veamos esto con un poco más de detalle .

El método de compresión sin pérdidas que utiliza GIF está basado en una especificación que es propiedad de la empresa Unisys, por lo que los desarrolladores de software precisan de su permiso para poder incorporar filtros en los programas de diseño . Sin embargo, cuando se utiliza PNG, se trabaja con una especificación de compresión de datos de libre uso, basada también en un sistema de compresión sin pérdidas superior al poderoso algoritmo de compresión LZW que se utiliza en GIF .

Ya sabemos que un archivo GIF soporta un máximo de 256 definiciones de color RGB, que guarda en una paleta de color propia, pues bien, PNG puede trabajar indistintamente con paletas de color indexadas ( abreviadas ) o con datos de color real ( 24 bits ) , lo que permite elegir entre reducir el tamaño al mínimo o aumentar la calidad al máximo .

Con el formato GIF es posible especificar un determinado color para que sea tratado como transparente, mientras que con PNG se puede gestionar un canal de transparencia alfa, lo que permite definir áreas de diferentes grados de transparencias a modo de una escala de grises .

Las imágenes PNG también pueden utilizar un método de carga entrelazado, dando la sensación de que la imagen se carga con mayor rapidez, pero lo hace de forma algo distinta, ya que admite entrelazamiento bidimensional, o sea, que la imagen se va haciendo más nítida gradualmente de arriba abajo y de izquierda a derecha .

No hay que pensar que PNG es mejor que GIF y JPEG en todo, ya que no puede conseguir animaciones similares a las creadas con GIF, ni reducciones de tamaño de ficheros como las conseguidas por JPEG ( gracias a poder comprimir con pérdidas ) .

Ya ha pasado el suficiente tiempo como para que las aplicaciones de tratamiento de gráficos y los programas de navegación incorporen el formato PNG, por lo que cada vez es más corriente encontrar imágenes PNG en Internet, pero hay que tener en cuenta que todavía no pueden ser tratados por todas las utilidades de navegación . En la Figura 1 se puede observar la opción de ?exportar como PNG? incluida en Paint Shop Pro, siendo fácil encontrarla en la mayoría de los programas enfocados al diseño para Internet .

En la Figura 2 se puede ver una pequeña comparación de dos imágenes guardadas como PNG, GIF y JPEG, y aunque no es una prueba definitiva, si permite observar que PNG puede sustituir a GIF con gráficos sencillos de pocos colores, pero no puede competir con JPEG cuando se trata de imágenes complejas con una amplia gama de color .

El lector habrá deducido fácilmente que PNG está más pensado para sustituir a GIF que a JPEG . Entonces, ¿ no existe alternativa al formato JPEG ?

La respuesta es que sí, ya que varias empresas han desarrollado el formato FlashPIX ( extensión FPX ) , capaz de contener la imagen completa más una serie jerárquica de varias copias de menor resolución dentro del mismo archivo, lo que permite elegir el tamaño y la resolución más adecuada a cada caso . No obstante, todavía no se ha generalizado lo suficiente como para que se pueda tener en cuenta como una solución actual .

Gráficos gigantes

Tratar con gráficos grandes es uno de los mayores problemas de cualquier diseñador web, y uno de los temas más corrientes en las consultas de los lectores . Aunque ya he comentado en otros artículos algunas soluciones específicas para estos casos, todavía se pueden dar algunos consejos complementarios sobre el tema .

Una de las formas de ?suavizar? la espera inherente a la carga de los gráficos grandes, es dividirlo en varias partes más pequeñas, a modo de mosaico, lo que hace posible que cada parte se muestre rápidamente según se vaya descargando . Este sistema tiene la ventaja de que el observador suele prestar una atención extra al proceso, ya que se consigue un efecto similar al de un rompecabezas o un puzzle . Descargando la Figura 3 se puede ver en tiempo real cómo actúa esta operación, eso sí, a costa de aumentar el espacio de ocupación de los ficheros, que siempre será superior al necesario por la imagen única .

Pero dejando aparte los posibles trucos que suavicen la espera, el mayor esfuerzo debe hacerse siempre sobre la reducción del tamaño del fichero . Los gráficos grandes suelen reducirse más a través del formato JPEG, pero no siempre se cumple esto . Antes de proceder a guardar un diseño o una foto provenientes de terceros, hay que reducir al máximo el número de colores, lo que se puede conseguir fácilmente con las herramientas que suelen incorporar los actuales programas de edición gráfica, que permiten realizar los dos pasos necesarios: contar los colores y reducirlos . En la Figura 4 se pueden ver los pasos dados con Paint Shop Pro para reducir el número de colores de una imagen . Recordemos que la reducción de colores conlleva de forma automática una disminución importante del tamaño del fichero .

Otra cuestión a tener muy en cuenta con los ?gráficos gigantes? es que no lo sean tanto como para que no se vean completos en la mayoría de las pantallas de los visitantes sin necesidad de tener que utiliza

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información