La carga diferida de imágenes, o image lazy loading, es una técnica que retrasa las peticiones HTTP de los recursos tipo imágenes hasta que estas sean visibles en el navegador con el objetivo de que el sitio web cargue lo más rápido posible con el contenido que es inmediatamente visible para el usuario y luego va cargando el contenido restante a medida que el usuario navega por el sitio web.
La carga diferida de imágenes reduce la cantidad de solicitudes HTTP que realiza en sitio web teniendo un impacto positivo al momento de evaluar su rendimiento.
En sus inicios, esta técnica solo era posible mediante el uso de JavaScript, con el paso del tiempo, se ha podido realizar también con algunos hacks CSS, hoy en dia es algo que se puede implementar directamente con HTML y el navegador se encarga del resto, sin embargo, cabe mencionar que para que esto funcione, el navegador aún debe tener el JavaScript habilitado.
Carga diferida de imágenes con el atributo loading
En HTML, las imágenes son incluidas usando el elemento img, este elemento tiene una serie de atributos que le indican al navegador como procesar las imágenes, por ejemplo, width y height que indican su tamaño, alt para el texto alternativo en caso tal la imagen no pueda cargar, el loading que le indica al navegador como debe cargar la imagen, entre muchos otros atributos.
Carga inmediata vs diferida
El atributo loading se puede utilizar con los siguientes valores
eager: Es el valor por defecto, el navegador cargara la imagen, aunque esta se encuentre en un area que aún no sea visible para el usuario.
lazy: El navegador atrasa la carga de la imagen hasta que se encuentre en un area visible para el usuario, de otro modo nunca cargara la imagen.
El uso de estos valores va a depender de la estructura de la página web, la recomendación es que las imágenes que no se encuentren en un area visible al momento de cargar el sitio, estas sean cargadas de forma diferida.
Enlaces de referencia
Puedes encontrar mayor información referente a la carga diferida de imágenes en los siguientes enlaces
El Software Libre es toda aplicación o conjunto de programas informáticos que proporcionan el código fuente en que fue desarrollado y este puede ser estudiado, modificado, y utilizado libremente con cualquier fin, inclusive puede ser redistribuido con cambios o mejoras o sin ellas, de manera comercial o no comercial.
La carga diferida de imágenes, o image lazy loading, reduce la cantidad de solicitudes HTTP que realiza en sitio web teniendo un impacto positivo al momento de evaluar su rendimiento.