Selecione uma imagem local para codificá-la como string BlurHash e uma URL de dados JPEG. Ajuste os componentes e a largura do LQIP, compare as duas prévias e copie ou baixe.
Funciona localmente no seu navegadorA bancada lê uma imagem local com o decodificador do próprio navegador, desenha-a em um canvas de no máximo 160 px no lado maior e codifica esses pixels duas vezes: como string BlurHash e como URL de dados de um JPEG pequeno. Os dois são placeholders da mesma imagem e nenhum sai da aba.
A prévia da esquerda é o hash decodificado de novo no formato do original, e a da direita é o JPEG recém-gerado, então os dois quadros mostram o que a visita vê enquanto a imagem real carrega. A linha abaixo informa o tamanho de origem, o comprimento da string e o peso do JPEG.
Um BlurHash é uma codificação de texto curta de uma versão desfocada da imagem. Os primeiros caracteres carregam a grade de componentes e um máximo quantizado; depois vêm a cor média e um coeficiente por célula. Com a grade 4 × 3 padrão a string mediu 28 caracteres; um único componente 1 × 1 gerou 6 caracteres e uma cor plana, e o máximo de 9 × 9 chegou a 166 caracteres e preserva mais estrutura.
A string é feita para um decodificador BlurHash na sua própria página: as bibliotecas de referência em JavaScript, PHP, Swift ou Kotlin, o componente de React ou uma CDN de imagem que aceite um hash. Ela não carrega largura, altura nem metadados: o decodificador desenha no tamanho que você pedir. Esta página codifica e também decodifica o próprio hash para a prévia, mas não aceita um hash como entrada.
A segunda saída é um JPEG de verdade, escrito na largura escolhida e com compressão fixa (qualidade 0,58). Na amostra de 800 × 500 usada nos testes, os 32 px padrão geraram uma URL de dados de 987 bytes — 1 KB na linha de dados — e 96 px ficaram abaixo de 1,6 KB. A linha de dados imprime o número exato da sua imagem.
Como é uma URL de dados, pode ser colada direto no src de um img, em um background-image do CSS ou em um picture, sem uma segunda requisição. O JPEG não tem canal alfa, então as áreas transparentes são pintadas de branco — o mesmo achatamento usado no hash — e o arquivo mantém a proporção do original. Baixar salva como voritools-lqip.jpg.
A imagem é lida, desenhada e codificada na página. Nada do arquivo é enviado, não há conta nem etapa de upload, e a ferramenta continua funcionando sem conexão depois que a página carrega. O resultado também é reproduzível: a mesma imagem com os mesmos componentes e a mesma largura gera sempre a mesma string e o mesmo JPEG.
O codificador implementa o algoritmo de referência do BlurHash; os hashes gerados aqui foram comparados com a implementação de referência e batem, então outro decodificador desenha o mesmo placeholder. Os únicos limites reais são os do navegador: uma foto muito grande não é problema porque a codificação amostra em 160 px, mas a aba precisa decodificar o arquivo antes, e um formato que o navegador não lê precisa ser convertido antes de usar aqui.