Como usar: Gerador de BlurHash e LQIP
- Escolha uma foto (ou experimente o exemplo). Tudo funciona no seu navegador.
- Ajuste o nível de detalhe do BlurHash: 4 × 3 é ideal para a maioria das fotos de paisagem; quanto mais componentes, mais formas são preservadas, mas a sequência fica mais longa.
- Escolha a largura e o formato do LQIP — um arquivo WebP de 16 px geralmente tem menos de 1 KB.
- Copie a string do BlurHash, o URI de dados ou o código pronto para HTML/CSS, Next.js ou React.
Três tipos de marcador de posição
| Espaço reservado | Tamanho | Ideal para |
|---|---|---|
| Cor dominante | 7 caracteres | Grelhas de miniaturas; a opção mais simples |
| BlurHash | 20–30 caracteres | Armazenamento em um banco de dados ou na resposta da API junto com a URL da imagem; decodificado em pixels no app |
| LQIP (imagem em base64) | Menos de 1 KB | Incorporado em HTML ou CSS, Next.js blurDataURL; funciona sem JavaScript |
Como o BlurHash funciona
O BlurHash descreve uma imagem com algumas ondas cosseno — tipo um JPEG de resolução bem baixa. A imagem é convertida em luz linear, multiplicada por padrões cosseno em cada direção, e os fatores resultantes são quantizados e gravados com um alfabeto de 83 caracteres. A decodificação recria essas mesmas ondas, produzindo um desfoque suave com as cores e o layout aproximado da imagem. Decodifique-a em cerca de 32 × 32 pixels e estique-a com CSS — ela foi feita pra ficar desfocada mesmo.
Sempre defina width e height (ou aspect-ratio) na imagem para que o placeholder reserve seu espaço e nada salte quando a foto chegar. Comprima a imagem completa também, com o Image Compressor.
Também pesquisado como: gerador de blurhash, gerador de lqip, gerador de imagens provisórias, marcador de lugar desfocado, nextjs blurdataurl, blurhash online, imagem de baixa qualidade como espaço reservado, carregamento progressivo de imagens.
Ferramentas que combinam com: Gerador de BlurHash e LQIP
- Redimensionador de imagens — Redimensione uma foto para dimensões exatas em pixels ou uma porcentagem, recorte-a para se ajustar ao tamanho de uma rede social ou encaixe-a dentro de uma moldura com uma cor de fundo — tudo isso diretamente no seu navegador.
- Imagem para Base64 — Transforme um arquivo PNG, JPEG, SVG, WebP ou GIF em um URI de dados Base64 com CSS e HTML prontos para copiar — ou cole uma sequência Base64 para visualizar e baixar a imagem.
- Conversor de imagens — Converta qualquer imagem que seu navegador consiga abrir — PNG, JPG, WebP, AVIF, GIF, BMP ou SVG — em PNG, JPG, WebP ou AVIF, seja um arquivo ou centenas de uma vez.
- Page Speed Test — Run Google Lighthouse on any URL for mobile or desktop.