Lazy Load de imágenes con JavaScript (funciona con Responsive Design)

por .

La carga de imágenes bajo demanda (Lazy Load) es una de las mejores técnicas para acelerar y reducir los tiempos de carga de un sitio web.

Esta tecnica es relativamente sencilla de implementar, sin embargo y con la llegada y casi obsesión que existe por hacer sitios que se adapten a cualquier dispositivo, comenzaron a surgir las diferentes complicaciones.

Para evitar cualquier tipo de complicación existe el proyecto Lazy Sizes, una biblioteca escrita en JavaScript para realizar la carga de imágenes bajo demanda que funciona perfectamente con sitios del tipo adaptables.

lazysizes responsive design

Este proyecto a diferencia de otras alternativas similares cuenta con la gran ventaja de no tener dependencias, algo que agradecerán aquellos que buscan soluciones sin tener la obligación de recargar sus sitios con bibliotecas innecesarias.

Otros aspectos interesantes de Lazy Sizes es que no requiere una configuración para funcionar, la mayoría de las funciones operan directamente con el uso de etiquetas básicas del tipo HTML Data.

Ejemplo de uso:

1. Una vez que descargamos la biblioteca debemos incluirla en nuestro proyecto:

<script src="lazysizes.min.js" async=""></script>

2. Lazysizes no necesita ningún tipo de configuración, podemos emplearla directamente utilizando la etiqueta HTML data (data-src y data-srcset)

<!-- non-responsive: -->
<img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload" />

O bien:

<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    src="lqip-src.jpg"
    data-srcset="lqip-src.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />

Muy simple y rápido. Implementar esta biblioteca JavaScript no tiene ninguna ciencia 🙂

El autor de Lazy Sizes diseño este proyecto con la vista puesta en el rendimiento, en el sitio oficial de la biblioteca van a encontrar una serie de ejemplos para entender y probar como se comporta este recurso en los distintos escenarios.

Web: Lazy Sizes

Categorizado en: