Choisissez une image locale pour l’encoder en chaîne BlurHash et en URL de données JPEG. Réglez les composantes et la largeur du LQIP, comparez les deux aperçus, puis copiez ou téléchargez.
Fonctionne localement dans votre navigateurL’atelier lit une image locale avec le décodeur du navigateur, la dessine sur un canevas de 160 px au maximum sur le côté le plus long, puis encode ces pixels deux fois : en chaîne BlurHash et en URL de données JPEG compacte. Les deux sont des espaces réservés de la même image, et aucun ne quitte l’onglet.
L’aperçu de gauche est le hash décodé à nouveau à la forme de l’original, celui de droite est le JPEG qui vient d’être produit : les deux cadres montrent donc ce que verra un visiteur pendant le chargement de l’image réelle. La ligne du dessous indique la taille de la source, la longueur de la chaîne et le poids du JPEG.
Un BlurHash est un texte court qui encode une version floue de l’image. Les premiers caractères portent la grille de composantes et un maximum quantifié, puis viennent la couleur moyenne et un coefficient par cellule. Avec la grille 4 × 3 par défaut, la chaîne mesurait 28 caractères ; une seule composante 1 × 1 donnait 6 caractères et une couleur unie, le maximum 9 × 9 en donnait 166 et conserve le plus de structure.
La chaîne est destinée à un décodeur BlurHash dans votre propre page : les bibliothèques de référence en JavaScript, PHP, Swift ou Kotlin, le composant React ou un CDN d’images qui accepte un hash. Elle ne contient ni largeur, ni hauteur, ni métadonnée : le décodeur la dessine à la taille demandée. Cette page encode, et décode aussi son propre hash pour l’aperçu, mais elle n’accepte pas un hash en entrée.
La seconde sortie est un vrai JPEG, écrit à la largeur choisie avec une compression fixe (qualité 0,58). Sur l’échantillon 800 × 500 utilisé pour les essais, la largeur par défaut de 32 px a produit une URL de données de 987 octets — 1 Ko dans la ligne d’informations — et 96 px sont restés sous 1,6 Ko. La ligne d’informations affiche le chiffre exact pour votre image.
Comme c’est une URL de données, elle se colle directement dans un src d’img, un background-image CSS ou un picture, sans seconde requête. Le JPEG n’a pas de canal alpha : les zones transparentes sont peintes en blanc — le même aplatissement que celui utilisé pour le hash — et le fichier garde les proportions de l’original. Télécharger l’enregistre sous voritools-lqip.jpg.
L’image est lue, dessinée et encodée dans la page. Rien du fichier n’est transmis, il n’y a ni compte ni étape de téléversement, et l’outil continue de fonctionner hors ligne une fois la page chargée. Le résultat est également reproductible : la même image avec les mêmes composantes et la même largeur donne toujours la même chaîne et le même JPEG.
L’encodeur applique l’algorithme de référence BlurHash ; les hashs produits ici ont été comparés à l’implémentation de référence et correspondent, donc un autre décodeur dessine le même espace réservé. Les seules limites réelles viennent du navigateur : une très grande photo ne pose pas de problème puisque l’encodage échantillonne à 160 px, mais l’onglet doit d’abord décoder le fichier, et un format que le navigateur ne lit pas doit être converti au préalable.