Las imágenes en las páginas web
Cualquier página web trate del tema que trate y sea del tipo que sea va a tener imágenes en su contenido. La imagen es un elemento de comunicación muy potente, pero también ayuda a aligerar páginas densas, romper el flujo del contenido ...
El uso de las imágenes por tanto es prácticamente obligado. y hay que tener cuidado en como se usan y conocer que opciones tenemos a la hora de elegir los tipos o formatos que mejor puede ayudar en el diseño de las páginas web
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.
Vas a querer usar imágenes para
- Como un mensaje completo (por ejemplo una infografía)
- Para apoyar y apoyar una explicación escrita
- Mostrar un producto
- Romper el flujo del contenido (por ejemplo para evitar textos muy largos)
- Por pura estética de la página
En cualquier caso a emplear las imágenes debemos guiarnos por unas cuantas reglas básicas:
- Procurar que las imágenes comuniquen algo, que cuenten una historia. Son muy apreciadas las infografias
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. - Usa el atributo alt para aclarar el contenido de la imagen
- 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 tiempos 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.
- Al igual que con los colores o los tipos de letra, intenta mantener un mismo estilo en los diseños de imágenes tanto vectoriales o ilustraciones como en las fotografías.
- No sobrecargues la página con mucho contenido gráfico
y poco texto
Aunque a veces esto está justificado como en un catálogo
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, no tenga un tamaño excesivo. 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á.
Tipos de imágenes
Si ampliaras la pantalla de tu monitor para ver cualquier imagen a nivel casi microscópico, verías que esa imagen está formada 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 píxel podía estar encendido (color blanco) o apagado (color negro).
En los monitores de color actuales cada píxel 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: una 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.
Otra opción es generar la imagen a partir de datos almacenados en el archivo, con ayuda de epxresiones matemáticas. Este método es muy bueno para imágenes geomátricas, como por ejemplo los logos.Son imágenes escalables sin pérdida de calidad.
En general vas a encontrar dos grandes grupos de imágenes para incorporar en la web: los mapas de bits y las imágenes vectoriales
Mapas de bits
En el mundo digital existen numerosos formatos para representar imágenes. En todos es necesario convertir una información visual en bits almacenables en un dispositivo digital.
Para lograr esa digitalización de una imagen se divide en puntos, cuántos más puntos forme esa imagen más realista será. Y cada punto o pixel que forme la imagen debe contener información suficiente como el color (profundidad de color).
Estos pixels se codifican para ser almacenados en memoria mediante bits, y eso es espacio de memoria. Cuanto más información de la imagen, se necesitan más bits y por tanto archivos más grandes para poder almacenarla.
Este formato donde los pixels se traducen a bits es lo que se conoce como mapa de bits.
Ejemplo:
Una imagen en blanco y negro podríamos representarla por pixels encendidos o apagados (profundidad de color 1 bit), si la imagen tiene un tamaño de 256 pixels (16x16) necesitariamos 256 bits para guardarla, o sea, 256/8, 32 bytes.
La misma imagen con una profundidad de color de 24bits (color verdadero). Cada pixel son 24 bits o sea 3 bytes. Ahora la imagen ocupa 768 bytes. Y ese tamañño es l de un pequeño icono.
Esta relación directa pixel a bit se usa en formatos fotográficos como TIFF, también conocidos como formatos raw. Se consigue almacenar imágenes reales, pero a costa de espacios de almacenamientos muy elevados.
En el caso de la web si un archivo ocupa mucho necesita mucho tiempo para ser mostrado en la pantalla de nuestro móvil u ordenador. Y bueno, también requieren mucho espacio de almacenamiento en el servidor
Para solucionar esto se recurre a técnicas de compresión que intentan mantener la información de la imagen lo más compelta de la imagen, pero en archivos de tamaño reducido. Podemos encontrar dos grandes técnicas
- compresión sin pérdidas: La imagen almacenada es una representación realista del original
- compresión con pérdida La imagen almacenada no es exactamente idéntica a la original, pierde algo de calidad.
A lo largo del tiempo han ido apareciendo diferentes técnicas de compresión de archivos gráficos que se conocen por la extensión de los nombres de archivo: gif, jpg, webP, Avif
Imágenes vectoriales (svg)
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) también se puede usar para imágenes fotográfícas, aunque no presentan grandes ventajas respecto a los mapas de bits.
Si alguno de los que leéis estas líneas ha oído 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 normalizado por el W3C, el mismo que regula el CSS o el HTML, y soporta animaciones
En las páginas web no se llega a tanto, 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.
Los archivos SVG se basan en una serie de expresiones bastante simples, como unas figuras básicas o primitivas (círculos y rectángulos) y definiciones de trayectos. Con esto se pueden formar figuras bastante complejas.
Pueden incluirse en una página como archivo SVG, igual que los restantes formatos o (lo más interesante) pueden definirse en la propia 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ágenes superiores se empiezan a distinguir los pixels mientras que la calidad de esta última no cambia nada.