Gerador de placeholders BlurHash, ThumbHash e LQIP

O que é um placeholder de imagem e por que você precisa dele

Um placeholder é o que o usuário vê no espaço de uma imagem enquanto ela é baixada. Sem ele, a página mostra um retângulo vazio (ou nada) e, quando a imagem chega, ela aparece de repente. Com ele, o espaço é preenchido desde o primeiro momento com uma versão muito borrada ou com a cor principal da foto, e a imagem final aparece por cima com uma transição suave.

Não é só estética. Um bom placeholder:

• Reduz a sensação de espera. O usuário percebe que a página já está lá, mesmo que as imagens demorem. Em conexões móveis lentas a diferença é muito perceptível.
• Evita saltos de conteúdo, desde que venha acompanhado de width e height ou de aspect-ratio. O espaço da imagem fica reservado desde a primeira pintura, então o CLS (Cumulative Layout Shift) não é afetado.
• Dá continuidade visual em galerias, lojas virtuais e feeds infinitos, onde há dezenas de imagens carregando ao mesmo tempo.

O segredo é que o placeholder seja minúsculo, normalmente menos de 300 bytes, para poder incorporá-lo diretamente no HTML ou no JSON da sua API sem adicionar requisições nem atrasar nada.

Como usar o gerador

1. Solte, cole (Ctrl+V) ou escolha suas imagens. Você pode adicionar quantas quiser. Elas são processadas no seu navegador e não são enviadas a nenhum servidor.
2. Escolha o tipo de placeholder nas abas de pré-visualização: LQIP, BlurHash, ThumbHash, cor ou gradiente. À esquerda você vê como fica o espaço enquanto carrega e à direita a imagem original.
3. Ajuste se necessário o número de componentes do BlurHash ou o tamanho do LQIP em Configurações avançadas. Os valores padrão funcionam bem para a maioria das fotos.
4. Copie o código para a sua stack: next/image, HTML com CSS, React com BlurHash ou ThumbHash.
5. Baixe o JSON com os dados de todas as imagens se quiser guardá-los no seu banco de dados, CMS ou arquivo de conteúdo.

Os cinco tipos de placeholder, explicados

LQIP (blurDataURL)

LQIP é a sigla de Low Quality Image Placeholder: uma versão da própria imagem reduzida a uns 16 pixels e codificada em base64 como data URI. É exatamente o que a propriedade blurDataURL do componente Image do Next.js espera quando você usa placeholder="blur".

O gerador cria um WebP de 16 px com qualidade média, que costuma ocupar de 100 a 250 bytes. Se o seu navegador não conseguir exportar WebP pelo canvas (Safari), ele usa JPEG, ou PNG se a imagem tiver transparência. Ao ser exibido, recebe um desfoque CSS (filter: blur(20px)) para que os pixels não apareçam.

Vantagens: não precisa de JavaScript para ser decodificado, funciona em qualquer <img> ou fundo CSS e o Next.js o integra de fábrica. Desvantagem: é um pouco mais pesado que um hash.

BlurHash

O BlurHash codifica a imagem como uma soma de ondas de cor (componentes de uma transformada do cosseno) em uma string de uns 20-30 caracteres, por exemplo LKO2:N%2Tw=w]~RBVZRi};RPxuwH. Para exibi-lo é preciso decodificá-lo com JavaScript em um <canvas>, o que bibliotecas como react-blurhash ou blurhash fazem na web, no iOS e no Android.

O número de componentes controla o detalhe: com 4×3 (o valor padrão) são captadas as principais massas de cor de uma foto horizontal. Para imagens verticais teste 3×4 e para fotos com muito detalhe até 6×5, sabendo que o hash cresce a cada componente.

Vantagens: string muito curta, ideal para guardar em um banco de dados ou enviar em uma API, e bibliotecas disponíveis para quase todas as plataformas. Desvantagem: exige JavaScript e não preserva a proporção, que você deve guardar à parte.

ThumbHash

O ThumbHash é uma alternativa mais recente ao BlurHash criada por Evan Wallace (cofundador do Figma). Codifica em uns 25-35 bytes, exibidos como uns 30-45 caracteres em base64, mais detalhe que o BlurHash, a proporção aproximada e o canal alfa, então funciona com PNG transparentes. A função thumbHashToDataURL o converte diretamente em uma imagem que você pode usar como fundo.

Vantagens: cores e contraste melhores, transparência e proporção incluídas. Desvantagem: um pouco menos difundido que o BlurHash fora da web.

Cor dominante

O placeholder mais leve possível: uma única cor hexadecimal, como #3a5f7d, aplicada como background-color do contêiner. O gerador agrupa os pixels em faixas de cor e retorna a mais frequente, que costuma corresponder melhor à percepção do que a média aritmética.

É a técnica usada pelo Pinterest e pelo Google Imagens: zero bytes extras em requisições, zero JavaScript, e a grade fica organizada enquanto carrega.

Gradiente CSS

Um linear-gradient com a cor média da metade superior e da metade inferior da imagem. Ocupa uns 60 caracteres, não precisa de JavaScript e transmite melhor que uma cor sólida a ideia de "céu em cima, chão embaixo" de muitas fotografias.

Qual escolher conforme o seu projeto

Uma regra prática: se o placeholder vai estar no HTML inicial, use algo que não precise de JavaScript (LQIP, cor ou gradiente). Se vai em dados consumidos por um cliente (JSON, GraphQL), um hash curto é mais prático.

Erros comuns

• Esquecer width e height. Um placeholder sem dimensões não reserva espaço e o conteúdo pula do mesmo jeito. Copie as dimensões que o gerador mostra.
• Usar um LQIP grande demais. A partir de 32 px o data URI passa facilmente de 1 KB por imagem, e com 30 imagens em uma página você incha o HTML em 30 KB que bloqueiam a renderização.
• Colocar placeholder na imagem LCP e adiá-la. O placeholder não substitui carregar cedo a imagem principal: use fetchpriority="high" nela. Explicamos isso no guia de lazy loading e fetchpriority.
• Calcular os placeholders a cada requisição. Gere-os uma vez ao enviar a imagem e guarde-os; recalculá-los no servidor a cada visita desperdiça CPU.

Perguntas frequentes

Minhas imagens são enviadas para algum servidor?

Não. Todo o cálculo é feito no seu navegador com canvas e JavaScript. As imagens não saem do seu dispositivo e são descartadas ao fechar a página.

Qual a diferença entre BlurHash e ThumbHash?

Ambos codificam uma versão muito borrada da imagem em poucos bytes. O ThumbHash preserva melhor as cores, guarda a proporção e suporta transparência; o BlurHash é mais difundido e tem bibliotecas para mais plataformas.

Como uso o blurDataURL com imagens remotas no Next.js?

Guarde o blurDataURL junto com a URL da imagem (no seu CMS ou banco de dados) e passe-o ao componente Image com placeholder="blur". O Next.js só o gera automaticamente para imagens importadas estaticamente.

Quanto pesa cada placeholder?

O LQIP de 16 px costuma ocupar de 100 a 250 bytes, o BlurHash 4×3 uns 28 caracteres, o ThumbHash uns 30-45 caracteres e a cor dominante 7 caracteres.

Posso gerar placeholders para centenas de imagens?

Sim. Solte todas de uma vez e baixe o JSON com os dados de cada arquivo, indexados por nome, para importá-los no seu projeto.

Funciona com SVG, GIF ou AVIF?

Sim, com qualquer formato que o seu navegador saiba exibir. Em GIFs animados é usado o primeiro quadro.