Gerador de BlurHash

BlurHash: placeholders compactos para imagens na web

BlurHash é uma representação compacta de uma prévia desfocada de imagem. Criado por Dag Ågren na Wolt em 2019, codifica um preview borrado em uma string de cerca de 20–30 caracteres que viaja junto com os metadados da imagem. Quando a página carrega, o navegador decodifica o hash em um canvas colorido enquanto o arquivo real ainda está chegando pela rede — transformando o esqueleto cinza num placeholder com cor e contexto.

O formato é baseado em uma pequena Transformada Discreta de Cosseno (DCT) 2D. Só os componentes de baixa frequência são preservados, quantizados e empacotados em um alfabeto base83 próprio que sobrevive a JSON, URLs e atributos HTML sem precisar de escape. Um hash típico de 4×3 componentes como LEHV6nWB2yk8pyo0adR*.7kCMdnj ocupa em torno de 28 bytes — ordens de grandeza menor que um thumbnail base64.

Por que usar um hash de placeholder?

• Evita Cumulative Layout Shift (CLS): o placeholder já ocupa a proporção final desde o primeiro paint, protegendo seus Core Web Vitals.
• Performance percebida: um borrão colorido parece bem mais rápido que um retângulo cinza, principalmente em conexões lentas.
• Continuidade estética: cores dominantes são preservadas, então a transição do placeholder para a imagem final fica natural.
• Payload mínimo: o hash cabe em uma coluna de banco ou campo GraphQL com overhead desprezível.

Como funciona o pipeline

O fluxo padrão em produção é: codifica no servidor durante o upload, guarda a string no banco junto com a URL da imagem, e decodifica no cliente enquanto o asset real ainda carrega.

// Node.js encode (sharp + blurhash)
import sharp from 'sharp'
import { encode } from 'blurhash'
const { data, info } = await sharp(buffer)
  .raw().ensureAlpha()
  .resize(32, 32, { fit: 'inside' })
  .toBuffer({ resolveWithObject: true })
const hash = encode(new Uint8ClampedArray(data), info.width, info.height, 4, 3)

Os dois últimos números (4, 3) são a quantidade de componentes em X e Y. Mais componentes capturam mais detalhe e produzem uma string maior. O padrão 4×3 é o sweet spot para thumbnails horizontais; imagens verticais costumam usar 3×4.

BlurHash vs LQIP, SQIP e CSS blur

• LQIP (Low Quality Image Placeholder): um JPEG 8×8 codificado em data: URL. Funciona em qualquer lugar, mas pesa ~400 bytes contra ~30 do BlurHash.
• SQIP (SVG QIP): primitivas vetoriais geradas por Tobias Baldauf — bonito, mas mais pesado e difícil de cachear.
• CSS filter: blur() em uma miniatura: simples, mas você ainda precisa carregar bytes de imagem.
• BlurHash: string pura, decodificada por poucos KB de JS em um canvas.

Ecossistema e adoção

Existem implementações oficiais em JavaScript/TypeScript, Swift, Kotlin, Python, PHP, Rust, Go, Java e C#. A técnica está em produção na Wolt, Mastodon, Signal e em vários CDNs de imagem. Cloudinary e Imgix já expõem BlurHash como atributo derivado do asset, então você nem precisa rodar o encoder.

Perguntas frequentes

BlurHash está pronto para produção? Sim — está em escala desde 2019 em Wolt, Signal, Mastodon e em vários produtos com muitas imagens.

Qual o tamanho ideal de hash? 20–30 caracteres atende a maior parte dos casos. Passar de 40 raramente melhora a qualidade percebida e infla o payload.

Quanto detalhe é preservado? Só o essencial: cores dominantes e gradientes amplos. Arestas, texto e rostos são intencionalmente desfocados — esse é o ponto.

Existe sucessor? Sim — ThumbHash, de Evan Wallace, melhora a qualidade e adiciona canal alfa. BlurHash continua sendo uma escolha madura e excelente.

E a performance? Decodificar um hash 4×3 para um canvas 32×32 leva ~5 ms num celular mediano. O resultado pode ser ampliado via CSS sem custo extra.