Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Gráficos para la web

En este primer artículo proporcionamos algunas pistas sobre el manejo de los gráficos para la creación de páginas Web. Se puede acceder a los otros artículos dentro de este apartado (programas de gráficos, animaciones, optimización y fondos y efectos) a partir de la lista que acompaña este texto.

  • Gráficos en las páginas web: cómo incluirlos en los documentos html.
  • El formato GIF: el formato gráfico básico para la web.
  • JPEG. La opción idónea para fotografías e imagen de tono continuo.
  • PNG: un formato infrautilizado pero muy interesante.

El aspecto de las páginas web actuales tiene poco que ver con las páginas de la primera mitad de los 90, los años iniciales de la www. Entonces, casi todas las páginas tenían un fondo gris, texto escrito de lado a lado en un solo bloque y algunas (pocas) imágenes. No era, evidentemente, la rica experiencia visual de hoy en día. De hecho, actualmente muchas páginas están basadas casi por completo en la imagen; al menos por lo que respecta a las páginas de bienvenida o portada. También es cierto que si queremos aportar contenido a la web, debemos recurrir al texto convencional.

Los dingbats son una fuente instantánea y muy variada de imágenes muy útiles para preparar rápidamente todo tipo de iconos y gráficos para las páginas web (ejemplos extraídos de Zapf Dingbats (la pluma) y de  la fuente gratuita Webdings, de Microsoft.)

Las imágenes, como hemos comentado antes, son ficheros que no forman parte de la página web propiamente dicha; se enlazan con ésta mediante un código especial (<img src="nombre_imagen">) Los formatos corrientes de imagen que muestran los navegadores son básicamente dos: GIF y JPG. Si lo queréis comprobar, id a cualquier página web, o con esta misma, y colocándose sobre una imagen, pulsad el botón derecho del ratón. Elegid "propiedades" y el navegador mostrará qué tipo de fichero es, con información sobre su nombre, dimensiones y tamaño. Se ha intentado introducir otros formatos como el PNG, que de hecho presenta interesantes ventajas, pero no ha tenido demasiado éxito. De hecho, los navegadores ni siquiera lo muestran correctamente sin un plugin. El problema de los estándares oficiales para los formatos de archivo de los navegadores está en que deben ser no patentados, utilizables por todo el mundo sin pagar royalties. Pero la falta de apoyo o publicidad puede evitar que se impongan ciertas soluciones; en cambio, el formato de shockwave flash (SWF) sí que se ha convertido de facto en un estándar para  la transmisión de imágenes vectoriales estáticas o dinámicas, con sonido e interactividad... y es un formato propiedad de Macromedia. No es de extrañar que haya tenido tanto éxito, puesto que las animaciones flash están llenas de ventajas.

GIF: el formato "todo terreno" para la web.

Los ficheros GIF (de Graphics Interchange File) son el tipo de gráficos más abundante en la red. No pierden calidad con el proceso de compresión, y viajan muy bien a través de la red. En general:

  • Son más rápidos en mostrarse en el navegador. Su sistema de compresión de datos no provoca pérdida de calidad.
  • Pueden contener un color transparente, y de este modo dejar que se vea a través de algunas áreas de la imagen el color o imagen de fondo, con lo que parece que están recortados y pegados sobre el fondo.
  • Además, pueden contener múltiples imágenes secuenciadas, creando una animación. Los gif animados tienen una presencia ubicua en la red, en especial en los llamados banners (las tiras de publicidad que aparecen tan a menudo.)
  • Su sistema de compresión es extremadamente eficiente si el gráfico contiene grandes áreas de color homogéneo.

La limitación principal que tienen los GIFs es el número de colores: 256 como máximo. Son el formato idóneo para imágenes con colores planos, normalmente también para textos en forma de imagen, pero no tanto para fotografías. La limitación en el número de colores disponibles hace que una imagen con transiciones suaves de colores, y con un mayor número de colores de partida, deba reelaborarse con una trama de los colores disponibles, con lo que puede perder calidad. Todo depende del tipo de imagen: a veces puede conseguirse un gif fotográfico de calidad aceptable.

Una aplicación interesante y muy frecuente de los gif transparentes es emplearlos como "espaciador". La técnica consiste en preparar un gif de 1 píxel cuadrado, transparente. Es decir, invisible del todo. Se suelen emplear asignándoles unas dimensiones equivalentes al espacio "vacío" que se quiera dejar en una tabla, o para situar en una posición determinada los elementos de la página. Una vez se haya descargado de la red, el usuario tiene en la memoria caché del navegador esta imagen y puede utilizarse las veces que se quiera sin tener que descargarla de nuevo.

Durante los primeros años de la www, se insistía mucho en la necesidad de que los colores de la paleta de los gifs estuvieran dentro de la llamada "paleta segura", un conjunto de colores que se ven en cualquier monitor con tarjeta gráfica de 256 colores, sea un Mac o un PC. Discutimos esta cuestión en otras páginas de Vigital.

JPEG. Ideal para fotografías.

El formato JPG (de Joint Photograph Experts Group) funciona siempre con millones de colores distintos, y por tanto no tiene problemas para representar cambios graduales de tono o color. Ahora bien, este formato funciona con un sistema de compresión de datos que hace que se pierda calidad. Se puede controlar el grado de compresión para llegar a un equilibrio entre la calidad de la imagen y su tamaño. Cuanto más se comprima una imagen, mayor pérdida de calidad de produce. Experimentando con el grado de compresión, podremos llegar a un porcentaje que suponga el mejor compromiso entre calidad y tamaño modesto. Los programas de gráficos permiten esta optimización de forma interactiva, mostrando una simulación del resultado con cada grado de compresión aplicado.

Como desventajas, JPG no admite transparencias y siempre se trata de una imagen única, estática.

PNG: Un formato apto para todo, infrautilizado.

Para solucionar algunas de las limitaciones de los dos formatos comentados, se desarrolló un nuevo estándar de código abierto, el png: portable network graphics. Lamentablemente, nunca ha llegado a tener mucho uso, en parte porque el soporte para alguna de sus prestaciones ha sido deficiente en las versiones anteriores de los navegadores. Hoy en día no hay ninguna razón para no optar por los gráficos PNG. Entre sus ventajas:

  • Puede incluir cualquier modo de color, desde blanco y negro a color verdadero.
  • El sistema de compresión es sin pérdidas, incluso a color verdadero. y es realmente potente, creando ficheros menores que los gif correspondientes. Aunque las imágenes a color completo son algo mayores que los jpg, la calidad es perfecta.
  • Admite transparencia graduada, lo que posibilita la fusión perfecta con los fondos.
  • Es extensible: un desarrollador puede incluir información adicional, la cual es simplemente ignorada en un visor que no la reconozca. (de hecho, el formato nativo de Fireworks es el png, aún cuando muchísimas de las prestaciones del programa no se corresponden a este formato gráfico.)