BlurHash : des aperçus floutés élégants pour vos images

BlurHash, c’est un petit algorithme qui génère un placeholder flouté et minimaliste d’une image, à afficher pendant son chargement. Il offre un rendu bien plus élégant qu’un fond gris, en intégrant une approximation des couleurs de l’image originale. Idéal pour améliorer l’expérience sur les connexions lentes.

Le principe : on encode une image avec BlurHash, qui nous retourne une chaîne de caractères courte, par exemple : "LEHLk~WB2yk8pyo0adR*.7kCMdnj". Il suffit ensuite de décoder cette chaîne pour générer un aperçu flou via un canvas.

Même si la lib propose un décodage côté client en JavaScript, dans notre cas (avec Astro), on préfère éviter d’ajouter du JS inutile. On a donc choisi un décodage lors de la génération via node-canvas, et on retourne une data URL à utiliser directement en background-image.

Seul bémol : ça ajoute une requête de navigateur pour chaque placeholder, car l’image floutée est récupérée au format data URL. En revanche, cela permet d’utiliser BlurHash avec une balise <img> ou <picture>, sans complication ni JS côté client.