BlurHash et ThumbHash
BlurHash / ThumbHash
Encode une image en une courte chaîne BlurHash ou ThumbHash, à afficher pendant le chargement de la vraie image.
Un BlurHash, c’est une vingtaine de caractères qui se décodent en une version floutée d’une image — assez court pour tenir dans une colonne de base de données à côté de l’URL et voyager dans le même JSON, si bien que la mise en page peut montrer quelque chose de reconnaissable avant l’arrivée de la photo.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI SVG
580 oEncodé en pourcents plutôt qu’en base64 : environ 25 % plus petit, et toujours lisible. Collez-le directement dans background-image: url("…")
Comment s’en servir
Déposez une image, ou collez un hash
Les deux sens fonctionnent sur le même panneau : une image vous donne un hash, un hash vous donne l’aperçu décodé.
Choisissez le nombre de composantes
Un hash fait 4 + 2·x·y caractères, donc 4 × 3 en fait 28. Plus de composantes veut dire plus de détail et une chaîne plus longue ; quatre par trois est la valeur par défaut habituelle.
Utilisez le punch sur une photo terne
Il augmente la variation sans déplacer la couleur moyenne, ce qui rattrape une image peu contrastée qui se décoderait sinon en rectangle uni.
Questions fréquentes
Pourquoi la source est-elle d’abord réduite à 32 px ?
Parce que tout ce qui est au-dessus de cette fréquence est de toute façon écarté par la transformation. Encoder en pleine résolution dépense cent millions d’évaluations de base pour produire les mêmes 28 caractères.
Il me faut seulement une couleur moyenne.
Prenez alors les six premiers caractères du hash — c’est exactement ce qu’ils encodent, si bien qu’une page qui n’a besoin que d’une couleur de fond n’a rien à décoder.
BlurHash ou ThumbHash ?
Le BlurHash est celui qui a des bibliothèques partout, et c’est celui que cette page produit. Le ThumbHash est plus court à qualité égale et transporte l’alpha, mais il vous faut un décodeur côté client dans les deux cas — prenez celui que votre pile a déjà.
À alimenter depuis
Image de substitution
Placeholder Image
Fabrique une image unie ou en dégradé à la taille demandée, avec ses dimensions inscrites dessus.
Couleur moyenne et dominante
Average & Dominant Colour
Rend une seule couleur représentative d’une image — moyenne, médiane ou la plus fréquente — sous forme d’objet couleur réutilisable.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Compresseur JPEG
JPEG Compressor
Réencode un JPEG à la qualité que vous fixez, avec le poids avant et après en direct et une vue des différences.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Couleur moyenne et dominante
Average & Dominant Colour
Rend une seule couleur représentative d’une image — moyenne, médiane ou la plus fréquente — sous forme d’objet couleur réutilisable.
Redimensionner une image
Image Resizer
Redimensionne en pixels, en pourcentage ou sur le plus grand côté visé, avec verrouillage des proportions et préréglages pour un lot entier.
Image de substitution
Placeholder Image
Fabrique une image unie ou en dégradé à la taille demandée, avec ses dimensions inscrites dessus.
Encodeur et décodeur Base64
Base64 Encoder & Decoder
Encode et décode en Base64 et en Base64URL, pour du texte comme pour des fichiers, avec un traitement correct de l’UTF-8.
Base64 vers image
Base64 to Image
Décode une chaîne Base64 ou un data URI et vous rend une image affichable et téléchargeable.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.