Las imágenes suelen ser el componente clave de muchos sitios web, ya sea para compartir información, visualizar productos o simplemente para aportar un toque estético y visual en algún artículo o sección de nuestra página web. No obstante, si no se manejan adecuadamente, las imágenes también pueden transformarse en un lastre para el rendimiento de un sitio web: ralentizarán el rendimiento y el tiempo de carga de una página y, por lo tanto, podrían resultar en una mala experiencia para el usuario.
Vamos a ver cuáles son los principales problemas a la hora de tratar con imágenes y las posibles soluciones y buenas prácticas que debemos aplicar para conseguir un mayor rendimiento en nuestro sitio web.
Elección del formato de imagen adecuado
El primer paso a la hora de optimizar nuestras imágenes es elegir el formato adecuado, no todos son iguales y cada uno de ellos tiene sus propias características y será más adecuado usar uno u otro en función de nuestras necesidades.
Los formatos más comunes son JPG, PNG y GIF, pero más recientemente han surgido otros formatos como Webp, AVIF o JPEG-XR que logran mucha mejor compresión manteniendo la calidad.
Sus principales características son:
- JPG: Quizás el más utilizado y conocido, ideal para fotografías y gráficos con muchos colores. Permite ajustar el nivel de compresión, consiguiendo un menor tamaño de archivo a costa de una ligera pérdida de calidad. No soporta transparencia.
- PNG: Soporta transparencia y conserva mejor los detalles en imágenes con pocos colores, como logotipos, iconos o gráficos con texto. Tiene mayor tamaño de archivo que JPG para fotografías.
- GIF: Limitado a 256 colores, pero permite crear imágenes animadas. Útil para animaciones sencillas o pequeñas.
- WebP: Formato desarrollado por Google que combina las ventajas de JPG (compresión con pérdida) y PNG (transparencia). Ofrece mejores ratios de compresión que los ya mencionados.
- AVIF: Nuevo formato basado en el códec de vídeo AV1. Promete una calidad superior a WebP con tamaños de archivo un 50% menores que los WepP, pero todavía tiene un soporte limitado en navegadores.
- JPEG XR: Alternativa a WebP desarrollada por Microsoft. Ofrece características similares, pero su adopción ha sido menos extendida.
A la hora de elegir el formato óptimo, debemos considerar factores como:
- Calidad de imagen requerida
- Tamaño de archivo deseado
- Necesidad de transparencia
- Soporte en navegadores
- Complejidad de la imagen (fotografía, gráfico vectorial, etc.)
Responsive images: servir la imagen adecuada según el dispositivo
El concepto de “responsive images” se basa en cargar la imagen más apropiada para cada dispositivo y tamaño de pantalla, evitando así la carga de archivos exageradamente grandes.
Si tenemos una imagen que ocupa el 100% del ancho de la pantalla de un monitor de escritorio y mostramos esa misma imagen para un dispositivo móvil, estaremos desperdiciando ancho de banda y haciendo que la página cargue más lentamente, afectando así a la experiencia de usuario.
Para solucionar este inconveniente, con HTML5 llegaron las etiquetas <picture> y <source> al rescate. Estas etiquetas nos permiten definir múltiples versiones de una imagen y seleccionar así la más adecuada según las necesidades o las características de del dispositivo donde se visualicen.
<picture>
<source media="(min-width: 1200px)" srcset="imagen-grande.jpg">
<source media="(min-width: 768px)" srcset="imagen-mediana.jpg">
<img src="imagen-pequeña.jpg" alt="Imagen responsive">
</picture>
En este ejemplo, cuando el navegador encuentra el elemento <picture> evaluará las condiciones de cada uno de sus <source>. Si la condición del primer <source> se cumple (ancho mínimo de 1200px) usará la imagen de su "srcset", si no se cumple evaluará el segundo <source> (ancho mínimo de 768px).
En caso de que no se cumpla ninguna de las condiciones o que el navegador no soporte <source> o <srcset>, se usará la imagen por defecto de la etiqueta <img>.
También podemos ajustar la resolución de la imagen en función de la densidad de pixeles del dispositivo utilizando el atributo “srcset” con descriptores de densidad.
<img src="imagen-1x.jpg"
srcset="imagen-1x.jpg 1x, imagen-2x.jpg 2x, imagen-3x.jpg 3x"
alt="Imagen con diferentes resoluciones">
En este caso, cuando el navegador llegue hasta el <img>, comprobará la densidad de pixeles del dispositivo y seleccionará la imagen más adecuada de la lista proporcionada en “srcset”: densidad normal (1x ), doble densidad (2x) o triple densidad (3x). En el caso que no se reconozca el atributo “srcset”, mostrará la imagen src por defecto.
La configuración de breackpoints y la creación de las diferentes imágenes para cada uno de ellos puede ser un proceso algo más tedioso y requerir un poco más de análisis de los dispositivos y resoluciones más comunes, pero a la larga, tiene múltiples beneficios, no solamente de experiencia de usuario, sino que requeriremos de un menor consumo del ancho de banda y mejoraremos el posicionamiento en buscadores, ya los principales motores de búsqueda valoran muy positivamente la optimización de las imágenes y los tiempos de carga.
Usar lazy loading para cargar imágenes bajo demanda
Otra buena técnica para optimizar el rendimiento de nuestra página web es con el uso de "lazy loading", que consiste principalmente en cargar las imágenes a medida que el usuario las va necesitando, en lugar de cargarlas todas al inicio.
Esto tiene varios beneficios:
- Mejora la velocidad de carga: Al no cargar todas las imágenes al inicio, reducimos significativamente el tiempo de carga de la página, sobre todo en dispositivos móviles.
- Optimiza el uso de recursos: Evitamos cargar imágenes que el usuario quizás nunca llegue a visualizar, ahorrando así ancho de banda y recursos del servidor.
- Mejor experiencia de usuario: Ya que percibirán la página más rápida y fluida.
Podemos implementar lazy loading de varias formas en nuestras páginas web. A partir de HTML5 podemos usar el atributo loading en las etiquetas <img> e <iframe>. Este atributo puede contener tres valores distintos: lazy para la carga en diferido, eager para cargar la imagen lo antes posible y auto para que el navegador decida.
<!-- lazy: Para indicar que debe cargarse de forma diferida. -->
<img src="imagen.jpg" loading="lazy" alt="Imagen">
<!-- eager: Para indicar que se cargue de forma inmediata. -->
<img src="imagen.jpg" loading="eager" alt="Imagen">
<!-- auto: Para indicar que el navegador decida cuando debe cargarse. -->
<img src="imagen.jpg" loading="auto" alt="Imagen">
Otra forma de lograr la carga diferida de imágenes es mediante el uso de <picture> y <source>, que junto a la técnica de “Responsive image” que hemos comentado anteriormente obtendremos una optimización aún mejor, cargando la imagen adecuada para el dispositivo y solamente cuando el usuario la necesita.
<picture>
<source media="(min-width: 1024px)" srcset="image-desktop.jpg">
<source media="(min-width: 600px)" srcset="image-tablet.jpg">
<img src="image-mobile.jpg" loading="lazy">
</picture>
<img src="image-sm.jpg"
srcset="image-lg.jpg 1024w, image-md.jpg 768w, image-sm.jpg 320w"
sizes="(min-width: 576px) 33.3vw, 100vw"
loading="lazy" alt="El lanzamiento más esperado" >
En caso de que el navegador no soporta de forma nativa lazy-load, podemos hacer uso de JS, donde encontraremos varias librerías como por ejemplo lazyLoad.js para solucionarnos la papeleta. Comprobamos si el navegador lo soporta y si no es así aplicamos una solución alternativa.
const lazyLoadSupport = 'loading' in HTMLImageElement.prototype
if (!lazyLoadSupport) {
/* solución alternativa a implementar */
}
Como podéis ver, Lazy loading es una técnica que combinada con el tamaño y formato de archivo adecuado se convierte en una herramienta muy poderosa con la que conseguiremos una mayor experiencia de usuario y mejores tiempos de carga.
Compresión de imágenes
Uno de los principales problemas al trabajar con imágenes es el del tamaño del archivo. A menudo, las imágenes se cargan directamente tal como se capturaron o como se diseñaron con el software de edición, y que, aun habiendo realizado distintos tipos de imagen parar cada resolución y seleccionado el formato adecuado, el peso no sea el ideal o pueda optimizarse aún más.
Para solucionar eso podemos usar la compresión de imágenes, que se basa en eliminar información irrelevante de una imagen de forma que el archivo resultante ocupe mucho menos espacio.
Existen dos tipos principales de compresión:
- Con pérdida (lossy): Permite ratios de compresión muy altos a costa de una pequeña pérdida de calidad. Este tipo de compresión son utilizados por formatos como JPG o Webp.
- Sin pérdida (lossless): Tiene una ratio de compresión menor pero afecta a los datos de la imagen original. Es utilizado en formatos como PNG o GIF.
Podemos aplicar compresión a las imágenes, de distintas formas:
Compresión por línea de comandos
Existen utilidades como Optipng, Pngquant o Jpegoptim que permiten comprimir imágenes mediante línea de comandos, pero también puedes hacerlo de forma nativa en windows con el comando “compact”.
compact /c /s:imagenes
Le pasamos dos argumentos:
/c para indicar que queremos comprimir
/s:[nombre_directorio] para indicar que aplique a todos los archivos y subdirectorios.
11111.JPG 16037 : 16037 = 1,0 a 1 [Correcto]
Captura.JPG 8200 : 8192 = 1,0 a 1 [Correcto]
Captura2.JPG 16011 : 16011 = 1,0 a 1 [Correcto]
Se comprimieron 4 archivos en 2 directorios.
40.248 bytes de datos en total están almacenados en 40.240 bytes.
La relación de compresión es 1,0 a 1.
Plugins de optimización
Existen distintos plugins para entornos de desarrollo como Gulp o Webpack que integran la optimización de imágenes en nuestro flujo de trabajo.
Cada uno de ellos dispone una amplia documentación al respecto y gran variedad de plugins para optimizar, minificar y tratar imágenes entre mucho otros.
Servicios web
Otra de las formas más cómodas y fáciles es usar alguna plataforma web que comprima por ti una o varias imágenes de golpe en casi cualquier formato.
Existen infinidad de páginas web con este servicio, algunas que yo mismo he utilizado y puedo recomendar:
- tinypng.com
- compress2go.com
- compressor.io
- iloveimg.com
- img2go.com
Aunque esta opción quizás no sea la más óptima si tienes un gran volumen de imágenes para comprimir, nos puede servir perfectamente para proyectos más pequeños o cuando solo necesitas optimizar algunas imágenes puntuales. Para sitios web con una cantidad considerable de imágenes, sería más conveniente utilizar herramientas automáticas integradas en un CMS o scripts que realicen la optimización de forma masiva.
Conclusión
Como podéis observar, la optimización de imágenes es un tema fundamental para conseguir una mejor experiencia de usuario y rendimiento en nuestros sitios web. Aplicando una o varias de las técnicas mencionadas, lograrás llevar tu sitio web al siguiente nivel en términos de velocidad, usabilidad y posicionamiento en buscadores. Además, hoy en día, existen CMS y diversas herramientas que facilitan enormemente este proceso, permitiendo una optimización casi totalmente automática , simplificando muchísimo esta labor.