Générateur BlurHash

Non, et c'est ce qui surprend le plus souvent. Un BlurHash n'est pas un format d'image — ce sont 20 à 30 caractères qu'un décodeur transforme en pixels. Votre application a besoin d'un décodeur pour l'afficher. Si vous voulez quelque chose qui fonctionne sans aucun décodeur, utilisez plutôt les boutons d'URI de données ou de téléchargement en PNG : les deux vous donnent un vrai PNG du placeholder flou, plus volumineux mais qui s'insère directement dans un attribut src ou dans un fichier sur disque.

Quatre en largeur et trois en hauteur est le réglage par défaut habituel, et c'est celui avec lequel cet outil démarre. En dessous, on perd le sens de la position des éléments dans le cadre ; au-dessus, le hash grossit vite pour un gain visuel très faible, puisque le résultat sera de toute façon flouté. Neuf par neuf, c'est 166 caractères — six fois la longueur d'un 4×3 pour un placeholder que personne ne regarde de près.

Parce que la moyenne est calculée en lumière linéaire, pas sur les octets sRGB. Encoder un dégradé de test dont les canaux sRGB font en moyenne rgb(130, 110, 95) donne un hash 1×1 qui se décode en rgb(147, 116, 103). Ce n'est pas un bug — moyenner directement des valeurs encodées en gamma en est un, et c'est pourquoi les miniatures moyennées naïvement paraissent souvent troubles. La moyenne linéaire est celle qui est perceptuellement correcte.

Non. Le « punch » est appliqué au décodage, donc la chaîne reste identique quelle que soit la valeur choisie. Il est inclus ici parce que la plupart des bibliothèques de décodage exposent le même paramètre, et il est utile d'en voir l'effet avant d'en choisir une valeur dans votre propre code.

Non. Le format n'a pas de canal alpha, donc un PNG transparent est encodé comme s'il avait été aplati sur ce que contenait le canevas. Pour les images avec une vraie transparence, une couleur de remplacement est généralement un meilleur choix qu'un flou.

Non. Elle est décodée, sous-échantillonnée et transformée dans la page. L'encodeur comme le décodeur ici ne sont que de l'arithmétique s'exécutant dans votre navigateur, sans aucune requête envoyée à aucun moment.

Un placeholder qui correspond aux couleurs et à la composition générale de l'image fait deux choses utiles. Il réserve le bon espace, si bien que rien ne se déplace quand l'image arrive — la principale cause des plaintes liées aux décalages de mise en page sur les pages riches en images. Et il donne immédiatement à l'œil quelque chose de plausible, ce qui rend le chargement plus court à ressentir qu'une attente équivalente devant un cadre gris, car il y a quelque chose à regarder plutôt que quelque chose à attendre.