Selecciona una imagen local para codificarla como cadena BlurHash y una URL de datos JPEG. Ajusta los componentes y el ancho del LQIP, compara las dos vistas previas y copia o descarga.
Se ejecuta localmente en tu navegadorEl taller lee una imagen local con el decodificador del propio navegador, la dibuja en un lienzo de como máximo 160 px en el lado más largo y codifica esos píxeles dos veces: como cadena BlurHash y como URL de datos de un JPEG pequeño. Los dos son marcadores de la misma imagen y ninguno sale de la pestaña.
La vista previa izquierda es el hash decodificado de nuevo con la forma del original y la derecha es el JPEG recién creado, así que los dos recuadros muestran lo que verá quien visite la página mientras carga la imagen real. La línea inferior indica el tamaño de origen, la longitud de la cadena y el peso del JPEG.
Un BlurHash es una codificación de texto corta de una versión desenfocada de la imagen. Los primeros caracteres llevan la rejilla de componentes y un máximo cuantizado; después vienen el color medio y un coeficiente por cada celda. Con la rejilla 4 × 3 por defecto la cadena midió 28 caracteres; un solo componente 1 × 1 dio 6 caracteres y un color plano, y el máximo de 9 × 9 llegó a 166 caracteres y conserva más estructura.
La cadena está pensada para un decodificador BlurHash en tu propia página: las bibliotecas de referencia en JavaScript, PHP, Swift o Kotlin, el componente de React o una CDN de imágenes que acepte un hash. No incluye ancho, alto ni metadatos: el decodificador la dibuja al tamaño que le pidas. Esta página codifica y además decodifica su propio hash para la vista previa, pero no acepta un hash como entrada.
La segunda salida es un JPEG real, escrito con el ancho que elijas y un nivel de compresión fijo (calidad 0,58). En la muestra de 800 × 500 usada en las pruebas, los 32 px por defecto dieron una URL de datos de 987 bytes —1 KB en la línea de datos— y 96 px no llegaron a 1,6 KB. La línea de datos imprime la cifra exacta de tu imagen.
Al ser una URL de datos puede pegarse directamente en el src de un img, en un background-image de CSS o en un picture sin una segunda petición. El JPEG no tiene canal alfa, así que las zonas transparentes se pintan de blanco —el mismo aplanado con el que se construye el hash— y el archivo mantiene la proporción del original. Descargar lo guarda como voritools-lqip.jpg.
La imagen se lee, se dibuja y se codifica en la página. No se envía nada del archivo, no hay cuenta ni paso de subida, y la herramienta sigue funcionando sin conexión una vez cargada la página. El resultado también es reproducible: la misma imagen con los mismos componentes y el mismo ancho produce siempre la misma cadena y el mismo JPEG.
El codificador implementa el algoritmo de referencia de BlurHash; los hashes generados aquí se compararon con la implementación de referencia y coinciden, así que otro decodificador dibuja el mismo marcador. Los únicos límites reales son los del navegador: una foto muy grande no es problema porque la codificación muestrea a 160 px, pero la pestaña debe decodificar el archivo antes, y un formato que el navegador no lea hay que convertirlo antes de usarlo aquí.