Cargar imágenes adaptables con srcset, picture y de forma diferida

Los que tenemos un sitio web libramos una batalla constante para mejorar el rendimiento y la velocidad de las páginas.
El elemento que más afecta son las imágenes y al mismo tiempo son las que hacen nuestras páginas más atractivas.
En esta página, un poco pruebo los métodos de carga disponibles mediante diferentes funcionalidades.

Como hacer las imágenes adaptables o responsivas

Cargar imágenes adaptables es el método de cargar diferentes imágenes, de acuerdo al ancho de la pantalla del dispositivo.
En este sitio donde el tráfico móvil es más del 80%, esto es sumamente importante.
Para eso se usa en la etiqueta de las imágenes la propiedad "srcset" o conjuntamente el elemento "picture".

Cargar imágenes adaptables con srcset

La propiedad srcset sugiere el navegador la ruta de las imágenes disponibles, para que el seleccione y cargue la más adecuada, de acuerdo a la resolución y tamaño de pantalla del dispositivo.
Se usa de la siguiente forma para dos imágenes.
La principal, que usa la propiedad tradicional SRC, carga de forma predeterminada la imagen de 1080 pixeles de ancho.
Con srcset especificamos la ruta a una imagen menor de 660 pixeles que puede ser cargada en dispositivos móviles con baja resolución.
También es obligatorio listar la imagen mayor.
A continuación cargan dos imágenes diferentes: imagen1-1080.jpg y imagen1-660.jpg, dependiendo de la resolución de pantalla del dispositivo.

El código usado es el siguiente:

<img src="imagen1-1080.jpg" width="1080" height="1080" alt=""
srcset="
imagen1-660.jpg 660w, 
imagen1-1080.jpg 1080w">

Errores cuando srcset a veces no carga la imagen indicada

Usar srcset en algunos casos es decepcionante, porque el navegador no carga la imagen adecuada, se debe a dos causas.
- La cache. Se soluciona cargando la página en una ventana de incógnito en navegador.
- La otra la más frecuente, se debe a Window.devicePixelRatio, la relación entre los pixeles CSS y los físicos.
Es la propiedad que le indica al navegador cuántos píxeles físicos de la pantalla de un dispositivo se deben usar para dibujar un solo píxel CSS.
Por ejemplo, el iPhone 14 tiene una pantalla de 390 x 844 pixeles, pero la resolución es de 1170px × 2532 px, para un Pixel Ratio de 3x.
El navegador le entregará la imagen en esta pagina de ejemplo de 1080 pixeles y no la que nosotros pensábamos, la de 660 pixeles.
Para saber el pixel Ratio de cualquier dispositivo en el simulador de Chrome, en la consola introduce: window.devicePixelRatio y presiona Enter.
En los teléfonos modernos oscila entre 2x y 3x.

Cargar imágenes adaptables con picture

El elemento picture a diferencia de srcsetg no sugiere, sino que obliga al navegador a cargar una imagen específica, cuando la pantalla del dispositivo excede o resulta menor de cierta medida indicada en pixeles.
A continuación dos imágenes que cargan de acuerdo al ancho de la pantalla del dispositivo (no resolución).

Se usa de la siguiente forma:

<picture>
<source media="(max-width:414px)" srcset="imagen2-660.jpg">
<source media="(min-width:415px)" srcset="imagen2-1080.jpg">
<img src="imagen2-1080.jpg" width="1080" height="1080" alt="">
</picture>

Diferir, retrasar o aplazar la carga de las imágenes en páginas web

Esta es la técnica para lograr que no se carguen todas las imágenes de la página, para evitar el consumo innecesario de datos.
Mediante esté método cargamos las imágenes en la medida que nos desplazamos hacia debajo de la página.

Cargar las imágenes de forma diferida nativamente con el navegador

Desde hace algún tiempo Chromium implementó la función lazy para lograr que, sin usar JavaScript, las imágenes se carguen de forma diferida. Es algo sumamente sencillo, solo se necesita agregar el tag loading="lazy" a la etiqueta de las imágenes. Si usamos loading="eager", entonces la imagen se carga de forma instantánea.
La siguiente imagen usa este método, comprueba su carga usando la consola del navegador.

Se implementa de la siguiente forma:

<img src="imagen3-660.jpg" width="660" height="660" alt="" loading="lazy">

Todos no estamos convencidos ni satisfechos de esta función. Depende del dispositivo, la conexión de red y otros factores según los especialistas de Chromium.

Cargar las imágenes de forma diferida con JavaScript

Desde hace años uso JavaScript para cargar las imágenes en las páginas de este sitio, solo cuando nos desplazamos por la página y se acerca el área del viewport (visor).
Llevo tiempo usando la minúscula librería lazyload.js disponible en Github, pero que cargo desde mi servidor.
Uso esta función de la siguiente forma:

<img class="lazy" src="#" data-src="imagen4-660.jpg" width="660" height="660" alt="">

Más información: Aplazar la carga de fotos e imágenes (lazy load) con Insersection

Cargar las imágenes de forma diferida y adaptable con JavaScript

La desventaja de lazyload es que no reconoce el tag srcset, por lo que las imágenes adaptables no se cargan de forma diferida.
Para eso estoy usando otra librería llamada lazysizes, disponible en Github que recomiendo en este artículo.

La uso de la siguiente forma:

<img class="lazyload" src="#" data-src="imagen5-1080.jpg" width="1080" height="1080" alt=""
  data-srcset="
imagen5-660.jpg 660w, 
imagen5-1080.jpg 1080w">

Como comprobar si las imágenes cargan correctamente

Tanto el modo de carga diferida, así como las imágenes adaptables se pueden comprobar como cargan, usando en la consola del navegador, el panel Red.

Mas información en internet

Páginas relacionadas

Comparte esta página

Sígueme en las redes sociales