Low-Quality Image Placeholders avec Cecil

Ce billet fait suite à un précédent article traitant des capacités de Cecil à optimiser les images (au sein des pages).

Même si les images ne bloquent pas le rendu d’une page web, il est important de penser à l’expérience utilisateur pendant leur chargement.

En effet, si une image n’est pas encore chargée et que ses dimensions (largeur x hauteur) sont définies, une zone vide sera affichée.

Exemple :

L'une des approches possibles est Low-Quality Image Placeholders (LQIP), qui pourrait être traduit par « Espaces réservés aux images de basse qualité ».

LQIP c’est quoi ?

Cette approche n’est pas nouvelle, conceptualisée par Guy Podjarny en 2013 : Introducing LQIP – Low Quality Image Placeholders.

Le principe est simple : afin de ne pas afficher une « boite vide » à l’endroit d’une image pas encore chargée, pourquoi ne pas afficher une version basse qualité, très légère donc rapide à charger ?

Exemple :

Implémentation

Via JavaScript

Une approche commune est d’utiliser une bibliothèque JavaScript de « lazy loading » qui saura remplacer l’image basse qualité une fois l’image finale chargée par le navigateur :

<img data-src="/hq-image.jpg"
     src="/low-image.jpg"
/>

Ici l’attribut src sera remplacé par la valeur de data-src via JavaScript.

Via CSS

L’autre option, qui ne nécessite pas JavaScript, s’appuie sur CSS et plus particulièrement sur la propriété background-image :

<img src="/hq-image.jpg"
     style="background-image:url(data:image/jpeg;base64,<data>);background-size:cover;"
/>

Ici <data> contient les données de l’image basse qualité, encodée en base 64.

C’est cette approche que j’ai retenu pour Cecil afin de ne pas imposer la dépendance à JavaScript.

Utilisation avec Cecil

Son utilisation avec Cecil est très simple : il suffit d’ajouter l’attribut placeholder=lqip à une image formatée en Markdown :

[Image d'exemple](/hq-image.jpg){placeholder=lqip}

Et… c’est tout 😊

De plus, afin de gagner en temps de génération, il est possible d’afficher non pas une image en basse qualité mais simplement la couleur dominante de l’image via placeholder=color.

Exemple :

Pour en savoir plus, je vous invite à consulter la documentation : https://cecil.app/documentation/content/#placeholder