Una web sin imágenes es inconcebible. Las necesitamos tanto para reforzar el contenido como para hacerlo más agradable.
Debido a la cantidad de información que contienen ocupan mucho espacio. Ello hace que ralenticen la carga de las páginas.
Una web sin imágenes es inconcebible.
Para minimizar este inconveniente podemos realizar tres acciones:
- Emplear tamaños adecuados
- Escoger el formato óptimo
- Retrasar la carga
Tamaños de imágenes
Partimos de la base de que cuando se amplía una imagen, pierde calidad. Por tanto, debemos determinar el tamaño mínimo necesario.
Es decir, si el tamaño de una imagen depende del ancho de la pantalla en que se visualiza la web, y dicha imagen va de extremo a extremo, su ancho no debería ser menor que el ancho de la pantalla más grande que esperemos.
Cuando se amplía una imagen, pierde calidad.
Generalmente las imágenes no ocupan toda la pantalla. Más aún, en un buen diseño, suele existir un tamaño máximo de contenido. Si la pantalla es más ancha, mostrará un fondo de color a los lados.
Por tanto, debemos conocer bien las características de nuestra web para escoger el ancho de las imágenes.
En ocasiones es conveniente tener copias de una misma imagen en diferentes tamaños y mostrar una u otra dependiendo el ancho de la pantalla. Esto cobra especial importancia en la actualidad, debido a la navegación con diferentes dispositivos.
Para gestionar la propuesta anterior existen diferentes opciones que van desde una configuración adecuada en al hoja de estilos a la programación. En el caso de los gestores de contenidos, este punto suele estar resuelto mediante herramientas que, incluso, realizan las copias de manera optimizada al cargar la imagen.
Formatos de imágenes
Las imágenes digitales son un conjunto de pequeños puntos luminosos (píxeles). Cada punto toma un valor determinado. La cantidad de puntos y el número de bits con que se codifican determina el espacio que ocupa la imagen en memoria. Y lo que es más importante, la cantidad de información que será necesario descargar para mostrarla en una web.
Para reducir la cantidad de puntos que se almacenan y transmiten existen diferentes técnicas de compresión.
El objetivo de una buena compresión es anular la redundancia.
Todas ellas se basan en eliminar información redundante o en eliminar la información menos importante.
En el primer caso no hay pérdida de calidad, en el segundo sí.
El objetivo de una buena compresión es anular la redundancia, de manera que se envíe la menor cantidad de información necesaria. Si no es suficiente, se recurre a eliminar aquellos elementos de las imágenes más difíciles de percibir por el ojo humano.
Concretamente, los sistemas de compresión con pérdida de calidad suelen disminuir el número de colores disponibles (png) o igualar regiones parecidas (jpg).
La cantidad de puntos y el número de bits con que se codifican determina el espacio que ocupa la imagen en memoria.
Ello hace que, para una misma imagen a una misma calidad, el formato determine el espacio que ésta ocupa.
Por tanto, a la hora de escoger la compresión más adecuada se debe valorar cómo es la imagen. Por ejemplo, aquellas imágenes fiel reflejo de la realidad suelen tener un comportamiento mejor frente a compresiones en .jpg. Sin embargo los gráficos, iconos y dibujos simples sin degradados responden mejor a .png.
No podemos olvidarnos de otros formatos como .svg, por ejemplo, empleados en iconos. Estos formatos permiten escalar la imagen sin variación de espacio ocupado. Pero, por lo general, su uso se limita a la parte de diseño y no les dedicaremos más atención por ahora.
Retrasar la carga de imágenes
Se trata de una técnica por la cual solo se cargan aquellas imágenes que, previsiblemente, van a ser visualizadas por el visitante.
Su gestión es compleja, aunque existen herramientas para facilitar su implementación.
Está basado en la detección de scroll. Es decir, la web sabe qué zona está viendo es usuario y carga solo las siguientes imágenes que visualizará.
Tiene el inconveniente de que si nuestro visitan baja muy deprisa en la página verá como aparecen las imágenes y la sensación es un poco extraña. Pero supone una reducción significativa del tiempo de carga.
Conclusión
Las imágenes son necesarias. Es necesario optimizar su tamaño, no superando el tamaño máximo al que se mostrarán y escoger el formato más adecuada para cada una.
Adicionalmente se puede recurrir a herramientas de retardo de carga que mejoran el rendimiento y evitan descarga de imágenes que no serán visualizadas.
