Imágenes en HTML (VIII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Aplicación de las imágenes a las páginas web.-

Ya conocemos las etiquetas necesarias para incluir imágenes en nuestra página, y hemos visto qué formatos gráficos podemos usar. Vamos ahora a ver cómo podemos usar las imágenes en nuestras páginas.

Uno de los temas principales a considerar es la opmización de nuestros ficheros gráficos. Cuando construimos una imagen con uno de los programas que para éste menester existen (Photoshop, Paint Shop Pro, Ilustrator, etc.) normalmente el tamaño del fichero optenido tiene demasiado peso en Ks para poder ser usado adecuadamente. Por ejemplo, una imagen de 50 Ks puede tardar en cargarse aproximadamente uno 10 segundos usando un modem de 56 k/s, tiempo excesivo para el usuario, y si nuestra página contiene varias de estas imágenes el resultado final será inviable.

Para solucionar esto, debemos tener especial cuidado con el tamaño de las imágenes que creemos o usemos. Como norma general una pagina completa no debe pesar más de 30 - 40 Ks (la página inicial de Yahoo pesa unos 20 Ks), por lo que debemos calcular la combinación número de imágenes - peso de las mismas para no superar estos límites.

Para establecer el peso de una imagen, la mayoría de los programas gráficos poséen una opción para optimizar el peso cuando están destinadas a las páginas web, en la que podemos fijar el peso de las mismas, el número de colores que van a tener y si las queremos entrelazadas, progresivas, transparentes, etc. Debemos buscar la combinación idónea entre calidad y peso, de tal forma que las imágenes resulten con buena calidad al menor peso posible. El ensayo y la práctica son las bases para conseguir buenos resultados.

Si estamos manejando una imagen enformato GIF, el peso de esta va asociado al número de colores que tenga, por lo que podemos jugar con la paleta de colores que asociemos a la imagen para variar su peso. A continuación tenéis una imagen gif guardada con un número de colores diferente, en donde podéis ver la relación colores asociados - peso en Ks:

GIF 256 colores - 5,7 K	GIF 64 colores - 5 K	GIF 8 colores - 2,5 K	GIF 4 colores - 1,8 K

¿Véis la diferencia?. Y eso que en este caso hemos elegido una imagen con pocos colores. En caso de una imagen más compleja, las diferencias aumentan mucho con el número de colores.

Vamos a ver ahora el caso de una imagen en formato JPG. En este caso el peso no va a depender del número de colores, si no del porcentaje de compresión aplicado:

JPG 100% - 5,3 K	JPG 75% - 3,8 K	JPG 50% - 2,6 K	JPG 25% - 2 K	JPG 5% - 1,2 K

Al igual que en el caso anterior, hemos elegido una imagen que pierda poco con la compresión para que veáis la disminución que se puede conseguir a veces a costa de no perder mucha calidad.

En el caso de una imagen tipo fotografía se nota más la pérdida de calidad:

JPG 100 % - 44 K	JPG 50 % - 7,7 K	JPG 5 % - 4,4 K

donde vemos que de la calidad máxima a la media la pérdida de calidad no es excesiva, pero el peso baja considerablemente, mientras que el paso de calidad media a baja no disminuye mucho el peso, pero sí la calidad de la imagen.

Otro factor a tener en cuenta es el tamaño físico de la imagen. A mayor tamaño, mayor peso en Ks. Debemos pués buscar un tamaño suficiente para que la imagen se véa bien, pero que no resulte de un peso excesivo.

En cuanto al número de imágenes a usar en una página, bueno, depende de qué página sea. Si el tema de la misma es eminentemente textual, deberemos usar pocas imágenes, para mostrar un ejemplo del tema que tratamos y poco más. Pero si el tema que tratamos es fundamentalmente gráfico, no podemos entonces eludir la introducción de imágenes, pero deberemos procurar que sean pocas y de buena calidad. Además, a más imágenes, más peso en la página, y más tiempo de espera para el usuario.

Los colores de las imágenes que usemos deben compaginar adecuadamente con los de la página (texto, fondo, etc.), y debemos procurar que estén dentro de la gama general que previamente hemos fijado para las páginas de nuestro sitio web. Para más información sobre colores, consultar el manual al respecto de este mismo sitio.

Debemos procurar usar imágenes que se repitan a lo largo de las páginas de nuestro sitio, como logotipos iguales, gráficos de menús, etc., ya que en cuanto una imagen se carga por primera vez queda almacenada en la memoria caché del navegador, por lo que cuando se necesite de nuevo en otra página éste no la pide al servidor, si no que la coge de la caché, siendo entonces la carga muy rápida.

Podemos aprovechar también este factor de la caché para hacer que nuestras páginas carguen más rápido, por medio de la precarga de imágenes. Este método consiste en introducir en la cabecera de la página inicial de nuestro sitio web unas instrucciones de código de script que hacen que las imágenes más frecuentes en nuestras páginas sean pedidas al servidor web. Aunque estas imágenes no sean necesarias para esta página inicial se cargan en la memoria caché, y así están disponibles luego cuando sean necesarias en posteriores páginas. Para ver más sobre el tema de la precarga de imágenes, consultar el manual de JavaScript correspondiente, sección constructor de objetos Image.

Si vamos a introducir una imagen en la celda de una tabla o en una capa en nuestra página, debemos procurar siempre usar para ambos elementos colores compatibles web, de la paleta segura, ya que si no lo hacemos así podemos encontrarnos con que el navegador renderice de diferente manera uno y otro, con el resultado de que el fondo de la imagen contrastará mucho con el fondo de la celda o capa, produciéndose un efecto desagradable a la vista. Si el color que deseamos para el fondo no es web seguro, mejor usar entonces una imagen de fondo transparente.

Otra posibilidad que nos ofrecen las imágenes en nuestra página es el uso de ellas como fondo de la misma. Existen multitud de páginas web que facilitan gratuítamente fondos para las páginas web, pero también podemos crear nosotros un fondo propio. Pero eso sí, debemos tener mucho cuidado entonces, ya que las imágenes diseñadas para actuar como fondos deben cumplir una serie de reglas básicas, sin las cuales el resultado obtenido será pésimo. No todas las imágenes valen como fondo de una página web.

Sobre este tema sólo deciros que existen programas adecuados para esta tarea, que construyen imágenes adecuadas para fondos haciendo coincidir los bordes de la imagen consigo mismo, ya que un fondo es una sucesión de copias de una misma imagen que se acoplan como en un puzle. Y también debéis consultar un buen manual de diseño gráfico que trate este tema. En un próximo artículo veremos cómo se construyen estos fondos.