Blog

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.

Optimisation des images avec Cecil

Cecil, mon générateur de site statique, permet de manipuler des ressources web (assets) tels que des images, des feuilles de styles (CSS ou Sass), des scripts, etc.

Dans le cas des images, on peut considérer qu’il en existe de deux types selon l’usage :

1. les images habillant les templates
2. les images illustrant le contenu des pages

Dans la suite de cet article je vais me concentrer sur les images contenues dans les pages, et comment elles sont optimisées par Cecil.