O que é um BlurHash?

Uma string compacta que codifica o conteúdo de baixa frequência de uma imagem: sua forma borrada e suas cores, feita para ficar junto da URL.

Qual o tamanho de uma string BlurHash?

Quatro caracteres mais dois por componente, então um hash 4 por 3 tem 28 caracteres e um 1 por 1 tem 6.

Quantos componentes usar?

Quatro por três é o normal em fotografia; um retrato às vezes fica melhor com três por quatro e um gráfico plano vai bem com dois por dois.

Minha imagem é enviada para gerar o hash?

Não. A imagem é desenhada em um canvas e codificada no seu navegador, então as fotos nunca saem do dispositivo.

Gerador de BlurHash

Transforme uma imagem em uma string BlurHash e decodifique qualquer hash na prévia borrada.

O Gerador de BlurHash funciona inteiramente no seu navegador: as imagens soltas são codificadas no seu dispositivo e nunca são enviadas.

Abrir o Gerador de imagens placeholder

Sobre Gerador de BlurHash

Um BlurHash é uma string de umas vinte e poucas letras que guarda a forma borrada de uma imagem: o suficiente para mostrar um placeholder reconhecível enquanto a foto baixa, em vez de um retângulo cinza que empurra o layout ao preencher. O codificador projeta a imagem sobre poucas funções cosseno, quantiza os coeficientes e empacota em base 83, por isso o resultado cabe bem em um JSON junto da URL. Esta ferramenta codifica a imagem que você soltar, decodifica qualquer hash para conferir a aparência e entrega o trecho de código.

Recursos

Codifica qualquer PNG, JPEG ou WebP em uma string BlurHash
Componentes de 1 a 9 em cada eixo, com o comprimento à vista
Decodifica qualquer hash válido, não só o recém-criado
Controle de intensidade para realçar o contraste do borrão
Cor média do hash, pronta para usar como fundo
Trechos para React, atributo HTML e resposta JSON

Como usar Gerador de BlurHash

Solte uma imagem ou cole um hash existente para decodificar
Ajuste os componentes: quatro por três serve para quase toda foto
Copie o hash e guarde junto da URL da imagem
Pegue o trecho de React ou HTML para o lado da renderização

Exemplo

Entrada

photo.jpg · 4 × 3 components

Saída

LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters

Vinte e oito caracteres pesam menos que a maioria das URLs de imagem e aparecem na hora, sem uma segunda requisição.

Erros comuns e solução de problemas

Um hash salvo não decodifica. — O comprimento precisa bater com os componentes do primeiro caractere: 4 + 2 × x × y. Uma string truncada falha nessa checagem.
O placeholder não parece com a imagem. — Faltam componentes: um por um guarda só uma cor média; três ou quatro por eixo já deixam uma foto reconhecível.

Perguntas frequentes

O que é um BlurHash?: Uma string compacta que codifica o conteúdo de baixa frequência de uma imagem: sua forma borrada e suas cores, feita para ficar junto da URL.
Qual o tamanho de uma string BlurHash?: Quatro caracteres mais dois por componente, então um hash 4 por 3 tem 28 caracteres e um 1 por 1 tem 6.
Quantos componentes usar?: Quatro por três é o normal em fotografia; um retrato às vezes fica melhor com três por quatro e um gráfico plano vai bem com dois por dois.
Minha imagem é enviada para gerar o hash?: Não. A imagem é desenhada em um canvas e codificada no seu navegador, então as fotos nunca saem do dispositivo.

Ferramentas relacionadas

Otimizador de imagens — Recodifique e reduza imagens (JPEG/WebP/PNG), com redimensionamento opcional.
Gerador de imagens placeholder — Placeholders em SVG, PNG ou data URI, em qualquer tamanho.
Extrator de Paleta de Cores — Extraia a cor dominante e uma paleta de qualquer imagem em HEX, RGB, HSL.
Codificador / Decodificador de imagem Base64 — Converta imagens em Data URIs Base64 com trechos de HTML e CSS, ou decodifique um Data URI em uma imagem para baixar.
Conversor de formato de imagem — Converta imagens entre PNG, JPEG e WebP inteiramente no seu navegador.
Seletor de Cor de Imagem — Passe o cursor e clique em qualquer pixel de uma imagem para pegar seu HEX, RGB e HSL, no navegador.