Source: https://casaucao.es/2018/loading_images_part_ii/
Timestamp: 2019-05-19 17:28:00+00:00

Document:
12 Sep 2018 • on jekyll responsive images plugin lazysizes blur • 4 mins
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 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="{{ site.baseurl }}/js/lazysizes.min.js" async=""></script>
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:
Esto mismo ya lo hicimos en la plantilla que creamos en el anterior post. Recordemos:
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.
transition: filter 300ms, -webkit-filter 300ms;
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:
« Cargando imágenes: parte I Una historia de verano »

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución