Gerador de ThumbHash

ThumbHash: o formato moderno de placeholder de imagem

ThumbHash é um formato muito compacto de placeholder para imagens, criado por Evan Wallace — cofundador e ex-CTO da Figma — e liberado como open source em 2023. Ele resolve o mesmo problema do BlurHash (mostrar uma prévia significativa enquanto a imagem completa carrega), mas produz strings menores, qualidade visual melhor e suporta canal alfa para assets com transparência.

Como o BlurHash, o ThumbHash usa uma Transformada Discreta de Cosseno (DCT) para manter só os componentes de baixa frequência da imagem. O empacotamento de bits é bem mais eficiente: hashes típicos têm 10 a 25 caracteres em base64, contra 25 a 35 do BlurHash, e o preview decodificado normalmente parece melhor — especialmente em fotografias e cenas escuras.

O que o ThumbHash melhora em relação ao BlurHash

• Payload menor: ~25 bytes contra ~30 do BlurHash equivalente, com qualidade discutivelmente melhor.
• Reprodução melhor das cores dominantes: ThumbHash preserva explicitamente a cor média e o tom das bordas.
• Suporte a canal alfa: representa PNGs e WebPs semi-transparentes — o BlurHash não consegue.
• Aspect ratio embutido: você não precisa guardar largura e altura ao lado do hash.
• Decode mais rápido: ~3 ms em celular mediano, contra ~5 ms do BlurHash.

Fluxo de codificação

A implementação de referência está em github.com/evanw/thumbhash com demo ao vivo em thumbhash.com. O pipeline é idêntico ao do BlurHash:

// Node.js encode
import { rgbaToThumbHash } from 'thumbhash'
import sharp from 'sharp'
const { data, info } = await sharp(buf)
  .resize(100, 100, { fit: 'inside' })
  .ensureAlpha().raw().toBuffer({ resolveWithObject: true })
const hash = rgbaToThumbHash(info.width, info.height, data)
const b64 = Buffer.from(hash).toString('base64')

Há ports oficiais em JavaScript, TypeScript, Python, Swift, Java, Rust, Go e PHP. O encoder espera uma imagem já reduzida para no máximo 100×100 — qualquer coisa maior é CPU jogado fora.

Migrando de BlurHash para ThumbHash

Não existe migração in-place: as strings de BlurHash e ThumbHash não são intercambiáveis. O caminho padrão é:

• Adicione uma nova coluna (por exemplo thumb_hash) sem remover o BlurHash existente.
• Recodifique sob demanda — gera o ThumbHash quando a imagem for tocada de novo, ou em batch no background.
• Faça fallback para o BlurHash quando o campo novo estiver nulo, e remova a coluna antiga quando a cobertura chegar a 100%.
• Ambos os formatos são minúsculos (~30 bytes), então manter os dois durante a transição custa praticamente nada.

Adoção e pipelines modernos

A adoção ainda é incipiente, mas acelerando. A Cloudinary anunciou suporte a ThumbHash em 2024, a Imgix está avaliando, e vários plugins de Next.js já o oferecem como drop-in para o placeholder="blur" nativo. Para interfaces em dark mode, o ThumbHash é particularmente útil porque a extração da cor de fundo facilita escurecer ou inverter o placeholder antes da imagem chegar.

Perguntas frequentes

ThumbHash substitui o BlurHash? Ele se posiciona como sucessor — mesmo modelo amigável, strings menores, qualidade melhor e suporte a transparência — mas o BlurHash continua testado em produção e perfeitamente válido para projetos existentes.

A adoção já é forte? Está crescendo rápido: Cloudinary já oferece suporte nativo e várias libs open source já têm encoder. A expectativa é virar padrão em 2026.

Qual o tamanho mínimo de string? Cerca de 10 caracteres em base64 para imagens muito pequenas. Fotografias típicas ficam entre 18 e 25 caracteres.

Suporta transparência? Sim — diferente do BlurHash, o ThumbHash codifica o canal alfa, o que o torna ideal para logos, stickers e cutouts de produto.

Devo codificar em resolução cheia ou em thumbnail? Sempre reduza para no máximo 100×100 antes de codificar. A DCT só captura baixas frequências, então entrada maior é só desperdício de CPU.