Générateur BlurHash

Transformez une image en chaîne BlurHash et décodez n'importe quel hash en aperçu flouté.

Le générateur BlurHash fonctionne entièrement dans votre navigateur : les images déposées sont encodées sur votre appareil et jamais envoyées.

Ouvrir le générateur d'images fictives

À propos de Générateur BlurHash

Un BlurHash est une chaîne d'une vingtaine de caractères qui mémorise la forme floutée d'une image : de quoi afficher un espace réservé reconnaissable pendant le téléchargement, au lieu d'un rectangle gris qui décale la mise en page en se remplissant. L'encodeur projette l'image sur quelques fonctions cosinus, quantifie les coefficients et les empaquette en base 83, si bien que le résultat tient sans peine dans un JSON à côté de l'URL. Cet outil encode l'image déposée, décode n'importe quel hash pour vérifier son rendu et fournit l'extrait de code.

Fonctionnalités

Comment utiliser Générateur BlurHash

  1. Déposez une image ou collez un hash existant à décoder
  2. Ajustez les composantes : quatre par trois convient à la plupart des photos
  3. Copiez le hash et stockez-le à côté de l'URL de l'image
  4. Reprenez l'extrait React ou HTML côté affichage

Exemple

Entrée

photo.jpg · 4 × 3 components

Sortie

LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters

Vingt-huit caractères pèsent moins que la plupart des URL d'image et s'affichent aussitôt, sans seconde requête.

Erreurs courantes et dépannage

Foire aux questions

Qu'est-ce qu'un BlurHash ?
Une chaîne compacte qui encode le contenu basse fréquence d'une image : sa forme floutée et ses couleurs, à stocker près de l'URL.
Quelle est la longueur d'une chaîne BlurHash ?
Quatre caractères plus deux par composante : un hash 4 par 3 fait 28 caractères, un hash 1 par 1 en fait 6.
Combien de composantes utiliser ?
Quatre par trois est l'usage courant en photo ; un portrait gagne parfois à passer en trois par quatre, un aplat suffit en deux par deux.
Mon image est-elle envoyée pour générer le hash ?
Non. L'image est dessinée sur un canevas et encodée dans votre navigateur : vos photos ne quittent pas votre appareil.

Outils associés

Tous les outils ArrayKit