Online Tool Store
Generador BlurHash
Codifica imágenes en cadenas BlurHash rápidamente. Ajusta componentes, decodifica hashes y verifica errores de color. Funciona completamente en tu navegador.
Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Origen
Marcador decodificado
Solo al decodificar; no se guarda en el hash.
Un BlurHash es una cadena que guarda junto a una imagen y expande en un marcador desenfocado al renderizar — para que el diseño muestre algo con sentido antes de que llegue la imagen real, sin una segunda petición de red. Su cliente necesita un decodificador para mostrarlo; el botón de URI de datos le da en su lugar una imagen ya lista, que no necesita decodificador pero es más grande. No se sube nada.
Cómo usarlo
- Suelte una imagen, elija un archivo o péguela con Ctrl+V — ya hay una muestra codificada para que vea la forma del resultado.
- Deje el detalle en 4 × 3 salvo que tenga un motivo para cambiarlo.
- Copie el hash y guárdelo en la misma fila o registro que la propia imagen.
- Decodifíquelo en su cliente, o use los botones de URI de datos o de descarga si prefiere no añadir un decodificador.
Lo que realmente obtiene
La longitud queda fijada por el número de componentes: cuatro caracteres de cabecera más dos por componente. Eso hace que el tamaño sea totalmente predecible antes de codificar nada:
1 × 1 6 caracteres color medio plano 3 × 3 22 caracteres zonas claras y oscuras aproximadas 4 × 3 28 caracteres el valor habitual 9 × 9 166 caracteres rendimiento decreciente
Veintiocho bytes es lo bastante poco como para incluirlo gratis en la respuesta JSON que lista sus imágenes — más pequeño que la mayoría de las cabeceras HTTP individuales. Ese es el objetivo del formato: el marcador de posición llega junto con los metadatos, en la petición que ya iba a hacer, así que no hace falta un segundo viaje de ida y vuelta antes de que la página pueda mostrar algo. La transformación además se ejecuta en luz lineal en lugar de sobre los bytes sRGB tal cual: promediar directamente valores codificados en gamma produce el desenfoque turbio y demasiado oscuro que a veces se ve. El efecto se aprecia mejor con un solo componente, donde el hash no es más que un promedio — un degradado de prueba con un promedio de bytes sRGB de rgb(130, 110, 95) se decodifica a rgb(147, 116, 103) en 1 × 1, y el resultado lineal es el físicamente correcto, el que coincidiría con lo que mediría si desenfocara una cámara apuntando a la imagen. Con más componentes, la diferencia en el promedio general se reduce a uno o dos niveles de 255.
Preguntas frecuentes
¿Puedo usar el hash directamente en una etiqueta <img>?
No, y esto es lo que más sorprende a la gente. Un BlurHash no es un formato de imagen — son entre 20 y 30 caracteres que un decodificador expande en píxeles. Su aplicación necesita un decodificador para mostrarlo. Si quiere algo que funcione sin decodificador alguno, use los botones de URI de datos o de descarga como PNG: ambos le dan un PNG real del marcador de posición desenfocado, que es más grande pero encaja directamente en un atributo src o en un archivo en disco.
¿Cuántos componentes debería usar?
Cuatro a lo ancho y tres a lo alto es el valor habitual y con el que empieza esta herramienta. Por debajo de eso se pierde la sensación de dónde están las cosas en el encuadre; por encima, el hash crece rápido para muy poca ganancia visible, porque el resultado se va a desenfocar de todos modos. Nueve por nueve son 166 caracteres — seis veces la longitud de un 4×3 para un marcador de posición que nadie mira de cerca.
¿Por qué un hash de 1×1 se ve más claro que mi imagen?
Porque el promedio se calcula en luz lineal, no sobre los bytes sRGB. Codificar un degradado de prueba cuyos canales sRGB promedian rgb(130, 110, 95) da un hash 1×1 que se decodifica a rgb(147, 116, 103). Eso no es un error — promediar directamente valores codificados en gamma sí lo es, y por eso las miniaturas promediadas de forma ingenua a menudo se ven turbias. El promedio lineal es el perceptualmente correcto.
¿El deslizador de contraste cambia el hash?
No. El «punch» se aplica al decodificar, así que la cadena es idéntica sea cual sea el valor que fije. Se incluye aquí porque la mayoría de las bibliotecas decodificadoras exponen el mismo parámetro, y es útil ver su efecto antes de elegir un valor en su propio código.
¿Un BlurHash conserva la transparencia?
No. El formato no tiene canal alfa, así que un PNG transparente se codifica como si se hubiera aplanado sobre lo que hubiera en el lienzo. Para imágenes con transparencia real, un color de marcador de posición suele ser mejor opción que un desenfoque.
¿Se sube mi imagen?
No. Se decodifica, reduce y transforma en la propia página. Tanto el codificador como el decodificador de aquí son aritmética pura que se ejecuta en su navegador, sin que se haga ninguna petición en ningún momento.
¿Por qué mostrar un marcador desenfocado en vez de un indicador de carga?
Un marcador de posición que coincide con los colores y la composición general de la imagen hace dos cosas útiles. Reserva el espacio correcto, de modo que nada se desplaza cuando llega la imagen — la causa principal de las quejas por desplazamiento de diseño en páginas con muchas imágenes. Y da a la vista algo plausible de inmediato, lo que hace que la carga se sienta más corta que una espera equivalente frente a un recuadro gris, porque hay algo que mirar en lugar de algo que esperar.
Cómo nos comparamos
| Función | Online Tool Store | Codificadores de línea de comandos | Marcadores de CDN de imágenes |
|---|---|---|---|
| La imagen nunca sale de su dispositivo | ✓ | ✓ | ✗ |
| Nada que instalar | ✓ | ✗ | ✓ |
| Decodifica un hash existente para comprobarlo | ✓ | Comando aparte | ✗ |
| Muestra el error de color de ida y vuelta | ✓ | ✗ | ✗ |
| También exporta una URI de datos sin decodificador | ✓ | Con pasos adicionales | ✓ |
| Carga una imagen arrastrando, explorando o pegando | ✓ | Solo ruta de archivo | Solo arrastrar o explorar |
| Codifica toda una biblioteca de una vez | ✗ | ✓ | ✓ |
| Se ejecuta automáticamente al subir | ✗ | ✓ | ✓ |
Use esto para entender el formato, ajustar el número de componentes y generar hashes para un puñado de imágenes. Cuando codifique cada archivo subido, eso pertenece a su canalización — un paso de compilación o un gestor de subidas — no a una pestaña del navegador. Esta herramienta es el lugar para decidir qué quiere antes de escribir ese código.