La mayoría de nosotros no solemos dar importancia a las imágenes que incluimos en el website.
Sin embargo, las imágenes representan uno de los componentes más importantes de una página. Es verdad que dan peso al sitio, en cuanto a tamaño del archivo que ocupa, medido en kilobytes o megabytes (lo que pesa el código, es decir la estructura lógica del sitio es despreciable).
En consecuencia, las imágenes que incluyamos en nuestro diseño son cruciales a la hora de determinar lo que tarde en cargarse nuestro website. Los formatos admitidos universalmente son tres: gif, jpeg (ó jpg), y png.
Otros formatos como bmp o tiff fueron rápidamente descartados, por su excesivo peso final. Los valores son relativos a la resolución, es decir la cantidad de puntos de color por pulgada, un gráfico de 500 pixeles por 375 pixeles, en formato png pesa 361 kb. El mismo archivo, en formato gif pesa 54,21 kb (seis veces menos), y en formato jpeg 69,03 kb (apenas un poco más que en formato gif).
Las imágenes de formato gif fue creado por una empresa llamada CompuServe allá por 1987, para reducir los tamaños de los archivos de gráficos que hasta ese momento eran bmp (o bitmaps de allí su nombre- o mapas de bits), pero sin sacrificar cantidad de colores ni calidad de imagen. Las imágenes de formato gif llegaban a ser más comprimidas que los bmp, lo cual redundaba en un menor tamaño, a igualdad de prestaciones. Lograr tal reducción era una imposición en momentos en que la mayoría de los usuarios disponían de conexiones con poco ancho de banda, basadas en los módems telefónicos, que no superaban los 54 kilobytes por segundo.
Otra ventaja de los archivos gifs es que permiten lograr gráficos animados. Nada espectacular, no creas que lograrás una película con un gráfico gif, pero puedes alcanzar pequeñas animaciones. Un ejemplo muy claro son los emoticones, esos pequeños iconitos que saludan, o guiñan un ojo. Con sus limitaciones, constituyen una posibilidad interesante para lograr movimiento en un sitio.
En qué caso aplicar cada formato, y qué ventajas comparativas tienen
Los archivos con formato jpeg se denominan así, nuevamente, como producto de las primeras letras de Joint Photographic Experts Group. Su popularidad comenzó con la era de la fotografía digital, pues todas las cámaras digitales o la mayoría de ellas- graban sus fotos con este formato.
La característica fundamental de este formato es que si bien hay pérdida de calidad por ejemplo al pasar de un formato bmp a jpeg-, la misma puede ser administrada graduando el nivel de compresión del archivo, lo que lo hace altamente versátil.
Las imágenes jpeg se basan en el sistema de colores RGB (red, green, blue es decir rojo, verde y azul), por lo cual las imágenes componen su variación de color en el mayor o menor grado de estos tres componentes. Por esta causa, y por la excesiva pérdida de calidad a que se llega cuando la imagen es ampliada, no se recomienda para trabajar textos impresos.
Por eso, los diseñadores gráficos cuando hacen diseño de impresos, no usan este formato. Pero para imágenes de sitios, es un formato más que adecuado, ya que se logra buena calidad visual con poco peso relativo.
Finalmente, el formato png (Portable Network Graphics) es el de más reciente desarrollo. Ha sido diseñado por Adobe, y el programa básico para trabajar estos gráficos es el Fireworks, aunque hay muchos otros. La calidad es muy alta, pero suele ser un poco más pesado que un gif o un jpeg. Sin embargo, se está volviendo más y más popular por el hecho de que admite transparencias.
Es decir, se puede diseñar un gráfico en formato png con un fondo transparente, y de esta manera, al colocarlo sobre un fondo de color o tramado, ya no estaríamos limitados a imágenes cuadradas o rectangulares. Al admitir las transparencias, podemos diseñar imágenes irregulares, y luego al colocarlas en el sitio, la parte de archivo sin imagen no toma ningún color, es decir, es transparente. El png en sí también es cuadrado o rectangular como los otros, pero disimula, pues podemos colocar lo que queramos, con cualquier forma, pero los espacios sin dibujo toman el color del fondo.
Cuando incluimos un gráfico en un sitio web, no debemos achicar el tamaño para que entre en nuestro diseño de página mientras la diseñamos, es decir, achicándola al colocarla. Lo mejor es reducirla con un buen editor de imágenes (como el Photoshop, o el Fireworks) y darle el tamaño y la resolución necesaria antes de incluirla en la página.
Al incluir imágenes en una página web, debemos colocarle las tags (etiquetas) como corresponde, es decir, incluir nombre de la imagen, descripción y texto alternativo (ese pequeño cartelito amarillo que aparece al pasar el ratón sobre ella).
Todos estos factores contribuyen a una buena indexación del sitio y, por lo tanto, a un buen posicionamiento, ya que son elementos textuales que son leídos por los robots de los motores de búsqueda (también llamados crawlers). Un buen posicionamiento finalmente implica más tráfico hacia el sitio y más potenciales clientes.
Por este motivo, conviene ponerle a la imagen un nombre que incluya alguna de las keywords del sitio, o al menos un nombre relevante al contenido que representa, evitando así nombres como 12335.jpeg, e incluyendo algo como impresora-deskjet-Epson-RX4500.
