Imágenes en las páginas web

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible (y poco aconsejable) evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las imágenes debemos guiarnos por unas cuantas reglas básicas:

• Procurar que las imágenes sirvan para algo, que cuenten una historia. En el tutor HTML verás que las imágenes tienen un atributo (alt) que se usa como descriptor de la imagen. Este atributo ayuda a los buscadores para indexar nuestras páginas y a mecanismos de accesibilidad para leerla. Importante para que el usuario tenga un buena experiencia al visitar vuestro sitio
• Usa el atributo title para dar alguna información cuando se pasa el ratón por encima de la imagen. Las orientaciones al usuario siempre son de agradecer, mejoran su experiencia en el sitio.
• Es importante controlar el tamaño de las imágenes que vayamos a colocar en nuestras páginas. Aunque la red es rápida siempre son preferibles páginas con timepos de carga mínimos.
• Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta. A veces una imagen muy grande requiere una compresión tal que al final tenemos una calidad pésima. Así que debemos plantearnos el tipo de imagen a usar.
• Una buena infografía puede sustituir o complementar a un texto. El ojo humano adquiere una enorme cantidad de información visual en tiempos increiblemetne cortos.

Las páginas aparte de imágenes, tienen scripts u hojas de estilo css, por ello es necesario controlar que la página no pese demasiado. Un visitante que tiene que esperar más de 5 o 10 seg para obtener un resultado en su pantalla es seguro que se marchará a otro sitio más rápido y, lo que es peor, probablemente no volverá.

Fíjate en las imágenes mostradas en tu monitor. Estas imágenes están formadas por unos puntos muy pequeños llamados pixels. Si tu monitor fuera de aquellos en blanco y negro utilizados en la época de los pioneros, cada pixel podía estar encendido (color blanco) o apagado (color negro).

En los monitores de color actuales cada pixel o punto de pantalla no representa esos dos únicos colores, como sabes pueden mostrar millones de colores y tonalidades. Pero la idea es la misma. La imagen está formada por puntos y el ordenador los maneja como bits.

A la hora de almacenar una imagen en un archivo se deberían guardar todos esos bits, uno a uno, pero esto podría ocupar mucho espacio por eso se guardan comprimidos de alguna manera. Te vas a encontrar con diferentes formas de hacer esto, básicamente exitsten dos formas: los mapas de bits y las imágenes vectoriales

Volvamos al monitor en blanco y negro. Cada punto de la pantalla es o blanco o negro, almacenar esa imagen en un archivo es sumamente fácil: cada punto (blanco o negro) es un bit (1 o 0). Si la imagen tiene 240 puntos ocupa 240 bits (240:8 = 30 bytes). Pero en realidad cada punto representa más de dos colores, 16 millones (si usamos 24 bits para cada pixel). En este caso la imagen anterior ocupará algo más: 240 puntos x 24 bits : 8 son 720 bytes. Ten en cuenta que 240 puntos es una imagen pequeñita, de 15 pixels de alto por 16 pixels de ancho por ejemplo.

En este método se basan los formatos JPG, PNG o GIF utilizados en las páginas web y que usan diferentes algoritmos para comprimir los archivos y ocupar así menos espacio. Si estas imágenes se escalan (se se les varía el tamaño) la calidad se ve degradada.

Imágenes JPG

Usando este formato pueden almacenarse imágenes de hasta 24 bits de color. Es recomendable para fotografías o imágenes con degradados. Cualquier programa editor de gráficos permite guardar una imagen en este formato con diferentes grados de compresión. Lógicamente cuanto más comprimamos la imagen menor es su calidad. Si queremos imágenes de alta calidad debemos soportar archivos de tamaños elevados. Recientemente ha aparecido una variación de este formato denominada JP2 o JPG2000, especialmente destinado a la red. Pero aún no es admitido por todos los exploradores.

Imágenes GIF

Este otro formato se usa para imágenes con hasta 256 colores ( 8 bits de color). Frente a esta limitación nos ofrece la posibilidad de definir zonas transparentes y además existe una variante que permite imágenes animadas, muy útil para llamar la atención sobre algo en concreto como puedan ser las novedades de nuestro sitio o un anuncio de algún servicio. Pero conviene no abusar de las animaciones, son archivos muy grandes y pueden llegar a resultar pesados. En nuestro sitio Gifsanimados tienes una excelente colección para elegir

Imágenes PNG

El formato PNG es el un formato con un magnífico comportamiento para la web. Realmente existen varios formatos PNG: PNG8, que almacena imágenes de hasta 256 colores, PNG24 para imágnes de 24 bits y PNG32 para imágenes de 32 bits. Permite transparencias como los GIF y transparencia graduada (colores cuya opacidad van desde el 0%, opacos, hasta el 100%, transparente). Por contra no admiten animaciones., no obstante existe una apliación del formato (aPng) que si es capaz de mostrar animaciones, la extensión de estos archivos es también .png.

Imágenes WebP

WebP es el formato de imagen más reciente en el mundo de la web. Nació 2010 e la mano de Google y pretende convertirse en un estándard desbancado a JPG, Png o Gifs. Soporta compresión superior sin pérdida y con pérdida para imágenes en la web. Admite transparencias y animaciones. Puede llegar a logra compresiones de alrededor de un 25% superiores a las conseguidas en el formato png. Con respecto al formato Jpg, sus resultados son muy parecidos en fotografías, en imágnes prediseñadas si que mejora los resultados. Sin embargo si presenta una clara ventaja frente a a png y gif.

Ese es un método especial para almacenar imágenes. Se basa en funciones matemáticas para describir la imagen completa. Este método no sólo se usa para figuras regulares (rectángulos, cuadrados, círculos) tambien se puede usar para imágenes tipo fotografía. Si alguno de los que leeis estas líneas ha oido hablar de una cosa llamada figuras de Mandelbrot sabrá que es eso de encontrar una función matemática para representar la formas tan poco regulares como un paisaje de montaña y similares. Estas imágenes dan una calidad excelente y permiten ser escaladas (modificar su tamaño) sin pérdida de calidad. Un ejemplo son los archivos DXF y otros usados en programas CAD. Esta normallizado por el W3C, el mismo que regula el CSS o el HTML, y soporta animaciones

En las páginas web los verás como archivos SVG (Scalable Vector Graphics) y es soportado por casi todos los navegadores. Estos gráficos se editan con programas al efecto, incluso de código abierto como el Draw de Libre Office. Pueden incluirse en una página como archivo SVG, como los restantes formatos o (lo más interesante) pueden definirse en la propa pagina como cualquier otro elemento (párrafo, enlace...). Un ejemplo sencillo de una imagen SVG:

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="darkblue" stroke-width="4" fill="lightgreen" />
</svg>

Que daría lugar a

Si aplicas el zoom al navegador veras que en las imágnes superiores se empiezan a distingir los pixels mientras que esta la calidad de esta última no cambia nada.