Generador de BlurHash
Convierte cualquier imagen en una pequeña cadena BlurHash o ThumbHash que muestra una vista previa suave y colorida mientras se carga la foto real. Ajusta los componentes, compara los marcadores de posición decodificados con el original y copia código listo para usar. Todo se ejecuta en tu navegador.
Última actualización:
Imagen de ejemplo cargada. Elige la tuya para codificarla.
Decodificar un BlurHash o ThumbHash existente
Cómo usar Generador de BlurHash
- Elige una imagen o suéltala en el recuadro. Se carga un atardecer de ejemplo para que veas el resultado enseguida.
- Fija los componentes. 4 × 3 es lo habitual para fotos horizontales; más componentes conservan más detalle, pero alargan la cadena.
- Compara las vistas previas del original, del BlurHash y del ThumbHash, y ajusta la intensidad si el marcador de posición se ve demasiado plano.
- Copia el hash para guardarlo junto a la imagen en tu base de datos o API.
- Copia el código para tu framework o descarga el marcador de posición como un PNG pequeño.
Longitud de la cadena BlurHash según el número de componentes
Un BlurHash siempre contiene 1 carácter para el número de componentes, 1 para el valor AC máximo, 4 para el color promedio (el término DC) y 2 para cada uno de los demás componentes, así que longitud = 4 + 2 × X × Y.
| Componentes (X × Y) | Caracteres | Ideal para |
|---|---|---|
| 1 × 1 | 6 | Solo el color promedio |
| 3 × 3 | 22 | Miniaturas cuadradas y avatares |
| 4 × 3 | 28 | Fotos horizontales (el valor predeterminado habitual) |
| 3 × 4 | 28 | Fotos verticales |
| 5 × 4 | 44 | Imágenes de cabecera en las que conviene más estructura |
| 9 × 9 | 166 | Máximo detalle (rara vez necesario) |
Cómo funciona la codificación
- La imagen se reduce y cada píxel se convierte de sRGB a luz lineal.
- Para cada par de componentes (i, j), el codificador suma cada píxel multiplicado por cos(π·i·x / ancho) × cos(π·j·y / alto). Es una pequeña transformada discreta del coseno, la misma idea que se usa dentro de JPEG.
- El primer factor es el color promedio. Los demás se escalan respecto al mayor y se cuantifican en 19 niveles por canal de color.
- Todo se escribe con un alfabeto de 83 caracteres que es seguro en JSON, URL y atributos HTML.
ThumbHash funciona de forma parecida, pero primero convierte los colores a un canal de luminancia y dos de diferencia de color, da más detalle a la luminancia que al color y empaqueta el resultado en bytes que normalmente se muestran en base64.
Consejos para marcadores de posición excelentes
- Reserva siempre el espacio de la imagen con width y height o con aspect-ratio en CSS, para que el diseño no salte cuando llegue la foto.
- Genera el hash una sola vez al subir la imagen y guárdalo en tu base de datos. Decodificar es rápido; codificar en cada visita a la página es un desperdicio.
- Haz aparecer la imagen real sobre el marcador de posición con una breve transición de opacidad en CSS para un efecto suave.
- Para una sola página estática, una pequeña data URL en línea creada con la herramienta Imagen a Base64 es una alternativa, pero es mucho más larga que un hash.
Preguntas frecuentes
¿Qué es un BlurHash?
BlurHash es una forma compacta de describir una versión desenfocada de una imagen como una cadena de texto corta, normalmente de 20 a 30 caracteres. La imagen se descompone en unas pocas ondas coseno (parecido a como funciona JPEG) y sus colores se guardan en un alfabeto de base 83. Una aplicación o un sitio web decodifica la cadena en un degradado suave que se muestra hasta que la imagen real termina de cargarse.
¿Cuántos componentes debo usar?
Los componentes fijan cuántas ondas de color se conservan en horizontal y en vertical. 4 × 3 funciona bien para la mayoría de las fotos horizontales y 3 × 4 para las verticales. Menos componentes dan un desenfoque más suave y abstracto y una cadena más corta; hasta 9 por eje conservan más estructura. La longitud de la cadena es 4 + 2 × X × Y caracteres, así que 4 × 3 da 28 caracteres.
¿Cuál es la diferencia entre BlurHash y ThumbHash?
ThumbHash es un formato más reciente que guarda una vista previa desenfocada parecida en unos 20 a 30 bytes. Conserva más detalle para su tamaño, admite transparencia y registra la relación de aspecto aproximada de la imagen dentro del hash, mientras que BlurHash necesita guardar el ancho y el alto por separado. BlurHash tiene más compatibilidad con bibliotecas en frameworks web y móviles.
¿Cómo uso un BlurHash con Next.js Image?
El componente Image de Next.js espera una data URL en blurDataURL, no un hash. Esta herramienta decodifica el BlurHash en un PNG pequeño y te da esa data URL, lista para pegar con placeholder en blur. Para muchas imágenes, guarda el hash y decodifícalo en el servidor o durante la compilación.
¿El hash codificado es el mismo que producen otras bibliotecas de BlurHash?
Sigue el algoritmo BlurHash publicado, incluida la conversión de sRGB a lineal y la codificación en base 83, así que las cadenas se decodifican correctamente en cualquier biblioteca estándar. Primero la imagen se reduce a un máximo de 64 píxeles en su lado más largo, que es la práctica habitual; las bibliotecas que codifican a otro tamaño pueden producir una cadena ligeramente distinta pero equivalente.
¿Qué hace el ajuste de intensidad (punch)?
La intensidad multiplica la fuerza de las ondas de color al decodificar el hash. Los valores por encima de 1 hacen el marcador de posición más contrastado y saturado; los valores por debajo de 1 lo suavizan. No cambia el hash en sí, solo cómo se dibuja.
¿Se suben mis imágenes?
No. Ambos codificadores se ejecutan en JavaScript en tu dispositivo. La imagen nunca se envía a un servidor, así que puedes usar la herramienta con imágenes privadas o no publicadas.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.