NorfiPC
NorfiPC » Web »

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


Por: Norfi Carrodeguas
Actualizado: 22 de diciembre del 2022
Mejorar la carga de imágenes para móviles retrasando o aplazando su carga por el navegador, usando y diferentes tamaños de acuerdo a la pantalla y resolución del dispositivo.
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.
Imagen que se carga de acuerdo a 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).
Imagen que se carga de acuerdo al ancho de la pantalla del dispositivo
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.
Foto de orquídea en Soroa, Cuba. Carga diferida
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:
Foto del mirador del Puente de Bacunayagua en Cuba
<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.
Imagen que carga de forma diferida y adaptable con lazysizes
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 en Facebook y Twitter
Facebook
Twitter
Share


Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí