Gerador de BlurHash / ThumbHash
BlurHash / ThumbHash
Codifica uma imagem numa string curta BlurHash ou ThumbHash para usar como placeholder de carregamento.
Um BlurHash são vinte e poucos caracteres que se decodificam em uma versão desfocada de uma imagem: curto o bastante para caber em uma coluna de banco de dados ao lado da URL e viajar no mesmo JSON, para que o layout mostre algo reconhecível antes de a foto chegar.
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
Data URI de SVG
580 bytesCodificado com porcentagem em vez de base64: cerca de 25% menor, e ainda dá para ler. Cole direto em background-image: url("…")
Como usar
Solte uma imagem, ou cole um hash
As duas direções funcionam no mesmo painel: uma imagem dá um hash, um hash dá a pré-visualização decodificada.
Escolha as contagens de componentes
Um hash são 4 + 2·x·y caracteres, então 4×3 são 28. Mais componentes significam mais detalhe e uma string mais longa; quatro por três é o padrão habitual.
Use o punch em uma fotografia chapada
Ele escala a variação sem mover a cor média, o que resgata uma imagem de baixo contraste que de outro modo se decodificaria como um retângulo chapado.
Perguntas frequentes
Por que a origem é reduzida primeiro para 32 px?
Porque tudo acima dessa frequência é descartado pela transformada de qualquer jeito. Codificar em resolução completa gasta cem milhões de avaliações de base para produzir os mesmos 28 caracteres.
Só preciso de uma cor média.
Então pegue os seis primeiros caracteres do hash: é exatamente isso que eles codificam, então uma página que só precisa de uma cor de fundo não tem de decodificar nada.
BlurHash ou ThumbHash?
BlurHash é o que tem bibliotecas em todo lugar e é o que esta página emite. ThumbHash é mais curto na mesma qualidade e carrega alfa, mas você precisa de um decodificador no cliente de qualquer jeito: escolha o que a sua stack já tem.
Pode receber de
Imagem placeholder
Placeholder Image
Gera um placeholder liso ou degradê em qualquer tamanho, com as dimensões desenhadas nele.
Cor média e dominante
Average & Dominant Colour
Devolve uma cor representativa da imagem — média, mediana ou mais frequente — como um recurso de cor.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Compressor de JPEG
JPEG Compressor
Recodifica um JPEG na qualidade que você escolher, com o tamanho antes e depois ao vivo e uma visão das diferenças.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Cor média e dominante
Average & Dominant Colour
Devolve uma cor representativa da imagem — média, mediana ou mais frequente — como um recurso de cor.
Redimensionar imagem
Image Resizer
Redimensiona por pixels, porcentagem ou pelo lado maior desejado, com proporção travada e predefinições para lotes.
Imagem placeholder
Placeholder Image
Gera um placeholder liso ou degradê em qualquer tamanho, com as dimensões desenhadas nele.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
Base64 para imagem
Base64 to Image
Decodifica uma string Base64 ou data URI de volta numa imagem visível e baixável.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.