Buscar
Cerrar este cuadro de búsqueda.

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 data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMjUwIiB2aWV3Qm94PSIwIDAgMzAwIDI1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2NmZDRkYiIvPjwvc3ZnPg==" loading="lazy" loading="lazy" decoding="async"
    data-src="https://fpoimg.com/300x150?text=Example"
    width="300"
    height="250"
    alt="Example image"
    loading="lazy" /><noscript><img loading="lazy" loading="lazy" decoding="async"
    src="https://fpoimg.com/300x150?text=Example"
    width="300"
    height="250"
    alt="Example image"
    loading="lazy" /></noscript>
				
			

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

Mailgun

Mailgun es un servicio brindado por Rackspace, el mismo te permite enviar y recibir correos de forma segura y confiable, una de sus principales características es la posibilidad de dar seguimiento y verificar las estadísticas de los correos.

Leer Más >>
Tips

WEB y HTML Semántico

Las etiquetas HTML son las encargadas de darle formato a nuestro contenido WEB, con ellas podemos definir como se debe mostrar un determinado texto, si es un título o un párrafo, si debe tener énfasis entre otras.

Leer Más >>

Deja una respuesta

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