Photo by Cel Lisboa on Unsplash

Esta es la segunda parte de una serie de artículos que estoy escribiendo sobre cómo mejorar la carga de imágenes con Jekyll.

Si has leído mi anterior post habrás visto que nos quedamos viendo cómo podíamos mejorar la carga de imágenes para reducir a la mínima expresión el tiempo de carga. Eso es lo que vamos a ver, y para conseguirlo vamos a aplicar una técnica que desde que la conocí me encantó. Se trata de LQIP o, por sus siglas en inglés, Low Quality Image Placeholder.

La idea consiste en generar una imagen de muy baja resolución y tamaño, del orden de 1-5kb. De esta forma la página estará completamente cargada en muy poco tiempo. ¿Pero entonces no se verá una imagen muy pixelada? Efectivamente. Los artefactos del JPEG se verán como puños. Para disimularlos un poco vamos a desenfocar este thumbnail mediante CSS de tal forma que el querido lector tendrá una página cargada en muy poco tiempo, con imágenes desenfocadas, sí, pero imágenes que le ayudarán a entrever lo que vendrá después una vez se cargue todo el contenido en una resolución mayor.

Arremángate las manos que vamos al lío.

LazySizes

LazySizes es un plugin que nos ayudará a cargar nuestras imágenes de forma asíncrona. No es necesario editar nada en JavaScript, y el propio plugin se inicia automáticamente. ¿Qué necesitamos para usarlo en nuestro sitio con Jekyll? Aquí va la receta:

1. Añádelo a tu sitio

Como siempre, lo primero es obtenerlo. Puedes descargarlo desde: https://github.com/aFarkas/lazysizes. Una vez descargado hay que añadirlo. Yo tengo organizado mis recursos de JavaScript en una carpeta que se llama js. Cópialo ahí o donde consideres.

Ahora hay que cargarlo. Jekyll incluye una carpeta _includes donde podemos encontrar el fichero: footer.html. En ese archivo, entre otras cosas, se hacen todos los “includes” de JavaScript, así que será ahí donde añadiremos la ruta al fichero. A continuación muestro parte de mi fichero footer.html:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="{{ site.baseurl }}/js/main.js?{{site.time | date: '%s%N'}}"></script>
<script type="text/javascript" src="{{ site.baseurl }}/js/lazysizes.min.js" async=""></script>
{% if site.google_analytics and jekyll.environment != "development" %}

2. Uso

Si lees la documentación del plugin verás que no hace usar nada de JavaScript para que funcione; tan solo tienes que añadir una clase más a la imagen:

<img data-src="image.jpg" class="lazyload" />

Esto mismo ya lo hicimos en la plantilla que creamos en el anterior post. Recordemos:

<img width="{{ width }}" class="fullscreen lazyload blur-up" src="{{ src }}" alt="{{ alt }}" data-src="{{ data-src }}" data-srcset="{{ data-srcset }}" fullscreen-base-src="/{{ largest.path }}" fullscreen-src="/{{ original.path }}" data-sizes="auto">

Explicamos algunos atributos:

• src="{{ src }}": contiene la ruta a la imagen de baja resolución o placeholder.
• data-src="{{ data-src }}": contiene la imagen con la resolución más óptima.
• data-srcset="{{ data-srcset }}": contiene paths a imágenes de distinta resolución para que el navegador use la más óptima.

3. Desenfoque por CSS

Como dijimos antes, vamos a aplicar un desenfoque para suavizar los artefactos del JPEG. También aplicaremos una pequeña animación para que cuando la imagen óptima termine de cargarse se sustitya. Si te has fijado, el elemento img tiene una clase que se llama blur-up. Simplemente con eso (y con la configuración CSS necesaria) ya estaría todo listo.

.blur-up {
  -webkit-filter: blur(7px);
  filter: blur(7px);
  transition: filter 300ms, -webkit-filter 300ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.fade-box .lazyload,
 .fade-box .lazyloading {
  opacity: 0;
  transition: opacity 300ms;
}

.fade-box img.lazyloaded {
  opacity: 1;
}

Y esto es todo. En serio. Ya tenemos todo listo para usar imágenes de baja resolución mientras se carga la versión más óptima en el navegador. ¿Qué quedaría? Un tercer y último paso: añadir lógica para poder ver ampliar una imagen. De eso hablará el próximo artículo.

Este post ha sido escrito escuchando:

jektify © 2023  +

Jektify