Comment utiliser : Générateur BlurHash et LQIP
- Choisissez une photo (ou essayez l'exemple). Tout fonctionne directement dans votre navigateur.
- Réglez le niveau de détail de BlurHash : la valeur 4 × 3 convient à la plupart des photos de paysage ; plus le nombre de composants est élevé, plus les formes sont préservées, mais plus la chaîne de caractères est longue.
- Choisissez la largeur et le format du LQIP — un fichier WebP de 16 px pèse généralement moins de 1 Ko.
- Copiez la chaîne BlurHash, l'URI de données ou le code prêt à l'emploi pour HTML/CSS, Next.js ou React. Cliquez ensuite sur « Suivant ».
Trois types d'éléments de remplacement
| Espace réservé | Taille | Idéal pour |
|---|---|---|
| Couleur dominante | 7 caractères | Grilles de vignettes ; l'option la plus simple |
| BlurHash | 20 à 30 caractères | Stockage dans une base de données ou dans la réponse de l’API à côté de l’URL de l’image ; décodé en pixels dans l’application |
| LQIP (image en base64) | Moins de 1 Ko | Intégration directe dans le code HTML ou CSS, Next.js blurDataURL; fonctionne sans JavaScript |
Fonctionnement de BlurHash
BlurHash décrit une image à l’aide de quelques ondes cosinus — à l’instar d’un fichier JPEG à très basse résolution. L’image est convertie en lumière linéaire, multipliée par des motifs cosinus dans chaque direction, puis les facteurs obtenus sont quantifiés et transcrits à l’aide d’un alphabet de 83 caractères. Le décodage restitue ces mêmes ondes, produisant un flou harmonieux qui conserve les couleurs et la structure générale de l’image. Décodez-la à une taille d’environ 32 × 32 pixels et étirez-la à l’aide de CSS — elle est censée être floue.
Définissez toujours width et height (ou aspect-ratio) sur l’image afin que l’espace réservé conserve sa place et que rien ne se déplace lorsque la photo s’affiche. Compressez également l’image complète à l’aide de l’Image Compressor.
Aussi recherché comme : générateur de blurhash, générateur lqip, générateur d’images de remplacement, espace réservé flou, nextjs blurdataurl, blurhash en ligne, image de remplacement de mauvaise qualité, chargement progressif des images.
Outils complémentaires : Générateur BlurHash et LQIP
- Outil de redimensionnement d’images — Redimensionnez une photo selon des dimensions précises en pixels ou un pourcentage, recadrez-la pour l'adapter au format des réseaux sociaux, ou insérez-la dans un cadre avec une couleur d'arrière-plan — le tout directement dans votre navigateur.
- Image en Base64 — Convertissez un fichier PNG, JPEG, SVG, WebP ou GIF en URI de données Base64 avec du code CSS et HTML prêt à être copié — ou collez une chaîne Base64 pour prévisualiser et télécharger l'image.
- Convertisseur d’images — Convertissez n'importe quelle image que votre navigateur peut ouvrir — PNG, JPG, WebP, AVIF, GIF, BMP ou SVG — au format PNG, JPG, WebP ou AVIF, qu'il s'agisse d'un seul fichier ou de plusieurs centaines à la fois.
- Page Speed Test — Run Google Lighthouse on any URL for mobile or desktop.