Carga diferida de imágenes con HTML

Facebook
Twitter
LinkedIn

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.
				
					<img
    src="https://fpoimg.com/300x150?text=Example"
    width="300"
    height="250"
    alt="Example image"
    loading="lazy" />
				
			

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

Te podría interesar
Tecnología

Docker Redis Container

Si estas desarrollando alguna aplicación la cual requiera conexión con un servidor redis, con docker puedes tener una instancia redis corriendo en cuestión de minutos. Docker se basa en contenedores para realizar alguna tarea específica. Por ejemplo, si necesitas almacenar datos, existen contenedores para MySQL, MongoDB, PostgreSQL, Redis entre otros.

Leer Más >>
WordPress Linting Hero Image
Tips

WordPress Linting

El uso de linting nos ayuda a mantener el estándar en nuestro código fuente, forzando al programador o grupo de programadores a seguir ciertas reglas preestablecidas, unificando de esta manera la legibilidad del mismo.

Leer Más >>
Tips

Repositorios Online

El desarrollo de un proyecto de forma colaborativa requiere la implementación de ciertas herramientas que ayuden al equipo a llevar a cabo las tareas de formas más eficiente, como por ejemplo, un repositorio de código fuente.

Leer Más >>

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *