Optimizar la Carga de Imágenes en tu Sitio Web con Placeholders

Aprende a implementar la técnica Low Quality Image Placeholders (LQIP) para mejorar la forma en que cargan las imágenes en tu sitio web.

Los placeholders, también conocidos como marcadores de posición, son imágenes, colores o degradados que sirven como previsualización para las imágenes de mayor tamaño que incrustamos en nuestros sitios, ya que estas comúnmente deben cargarse de forma diferida para evitar tener problemas de rendimiento y entorpecer la experiencia de nuestros usuarios. Simplemente es una forma para indicarle a los visitantes de nuestra página web que en esa sección irá una imágen y que aún se está cargando.

Las imágenes son unos de los recursos que más peso pueden tener en un sitio web, y si estás no están optimizadas correctamente harán que tu página parezca lenta y arruinará la experiencia de navegación de tus usuarios. Siempre que incrutamos imágenes en nuestro sitio web estás se muestran cuándo están completamente cargadas y no hay ningún tipo de indicador para los visitantes que allí está incrustada una imágen, mostrándose de está manera:

Esto es muy aburrido, es por eso que debemos poner en práctica usar placeholders.

¿Qué es LQIP?

Es una técnica que consiste en la minificación de una imágen para convertirla en un tamaño muy pequeño y de baja calidad, y que esta misma sirva como previsualización de la imágen de mayor nítidez, que estará cargándose en segundo plano y dónde también podemos usar la propiedad loadingcon su valor lazy, para implementar la carga diferida en las imágenes de forma nativa por parte de los navegadores web modernos.

Aqui puedes ver el soporte que tiene la propiedad loading:

Puedes ver los datos más actualizados de soporte en los diferentes navegadores en el siguiente enlace: https://caniuse.com/loading-lazy-attr.

¿Cómo implementar LQIP?

Para implementar LQIP necesitaremos usar Node.js(el cuál ya debes de tener instalado para seguir este ejemplo), un pequeño código en JavaScript (muy sencillo) y además haremos uso de la técnica nativa lazyload. Así que primero vamos a obtener la versión miniatura de nuestra imágen.

Para ello vamos hacer uso de una herramienta que tiene el mismo nombre: https://github.com/zouhir/lqip. Creamos una carpeta en cualquier directorio de nuestro equipo e inicializamos un proyecto de Node.js (si aún no tenemos uno) con el siguiente comando en una terminal:

npm init -y

Luego instalamos la herramienta con el siguiente comando:

npm install lqip

Ahora vamos a generar la miniatura de la imágen que necesitamos, por lo que vamos a crear un archivo, en mi caso yo lo llamaré lqip.js (un nombre muy original 😅), y escribimos dentro el siguiente código:

const lqip = require('lqip')

// Ruta de la imagen
const imagen = 'imagen.jpg'

// Usamos la librería lqip para generar la miniatura
lqip.base64(imagen).then((resultado) => console.log(resultado))

Y ejecutamos el archivo con el comando:

node lqip.js

Luego de esto veremos en la terminal una serie de cáracteres que será la imágen minificada y convertida en Base64, similar a esto (una pequeña porción de los cáracteres para no añadirlos todos):

data:image/jpeg;base64,/9j/4AAQS...

Ahora vamos a implementarla en nuestro sitio, debemos colocarla dónde la necesitamos y además es necesario que conozcamos las dimensiones de la imágen original, para ello usamos un código HTML similar al siguiente:

<img
  width="720"
  height="460"
  src="data:image/jpeg;base64,/9j/4AAQS..."
  data-src="imagen.jpg"
  alt="Texto alternativo de la imágen"
  loading="lazy"
/>

Ahora si vemos el resultado en nuestro sitio cargará la miniatura de acabamos de crear, pero esta no cambiará y no cargará la imágen original, por lo que vamos a usar un poco de JavaScript para cargar la imágen con mayor resolución, por lo que debemos crear un archivo, yo lo llamaré app.js y lo cargamos en nuestro sitio con el siguiente código:

// Obtenemos todas las imágenes que tengan la propiedad loading="lazy"
const imagenes = document.querySelectorAll('img[loading="lazy"]')

// Recorremos el array de las imágenes
imagenes.forEach((imagen) => {
  // Asignamos la propiedad data-src a src para cargar la imagen original
  imagen.src = imagen.dataset.src
})

Y eso es todo, ahora cuando entres en el sitio verás la carga de la miniatura y luego verás la imágen original. Además de la ventaja de implementarlo en todas las páginas de tu sitio, solo debes añadir la propiedad loading="lazy" a todas las imágenes, incluir la imágen minificada mediante LQIP y obviamente la imágen original usando el atributo data-src.

Asi se ve en acción:

Otras técnicas para generar placeholders

LQIP es una técnica asombrosa, en mi caso es mi favorita, pero existen otras técnicas para crear placeholders de nuestras imágenes que son muy creativas:

Color Sólido

Otra técnica mucho más fácil consiste en simplemente en agregar un color, donde obtenemos el color predominante de la imágen y la aplicamos mediante CSS:

Placeholder de imágenes con colores de fondo.

Si podemos ser creativos también podemos utilizar gradientes:

SQIP

Es otra técnica inspirada en LQIP, también permite crear placeholders de nuestras imágenes pero aplicando otros tipos de estilos, por ejemplo:

Puedes ver la documentación en su repositorio de GitHub: https://github.com/axe312ger/sqip, para que puedas utilizar esta librería.

Sin duda alguna estas ténicas le dan un poco más de dinamismo a tu sitio, además de optimizar la manera en que cargan las imágenes implementando la técnica de lazyload.