Generador de BlurHash
Convierte una imagen en una cadena BlurHash y decodifica cualquier hash en su vista previa borrosa.
El Generador de BlurHash funciona íntegramente en tu navegador: las imágenes que sueltas se codifican en tu dispositivo y nunca se suben.
Abrir el Generador de imágenes de marcador
Acerca de Generador de BlurHash
Un BlurHash es una cadena de una veintena de caracteres que guarda la forma borrosa de una imagen: lo justo para mostrar un marcador reconocible mientras se descarga la foto, en lugar de un rectángulo gris que desplaza la maquetación al rellenarse. El codificador proyecta la imagen sobre unas pocas funciones coseno, cuantiza los coeficientes y los empaqueta en base 83, por eso el resultado cabe cómodamente en un JSON junto a la URL. Esta herramienta codifica la imagen que sueltes, decodifica cualquier hash para comprobar cómo se ve y te da el fragmento de código.
Características
- Codifica cualquier PNG, JPEG o WebP en una cadena BlurHash
- Componentes de 1 a 9 en cada eje, con la longitud a la vista
- Decodifica cualquier hash válido, no solo el recién creado
- Control de intensidad para realzar el contraste del desenfoque
- Color medio del hash, listo para usar como fondo
- Validación que explica por qué un hash es incorrecto
- Fragmentos para React, atributo HTML y respuesta JSON
- La codificación usa una copia reducida, así que es instantánea
Cómo usar Generador de BlurHash
- Suelta una imagen o pega un hash existente para decodificarlo
- Ajusta los componentes: cuatro por tres sirve para casi toda foto
- Copia el hash y guárdalo junto a la URL de la imagen
- Coge el fragmento de React o HTML para la parte de renderizado
Ejemplo
Entrada
photo.jpg · 4 × 3 components
Salida
LEHV6nWB2yk8pyo0adR*.7kCMdnj
Average colour #8a7f6e · 28 characters
Veintiocho caracteres pesan menos que la mayoría de las URL de imagen y se pintan al instante, sin una segunda petición.
Errores comunes y solución de problemas
- Un hash guardado no decodifica. — La longitud debe coincidir con los componentes del primer carácter: 4 + 2 × x × y. Una cadena truncada falla esa comprobación.
- El marcador no se parece a la imagen. — Faltan componentes: uno por uno guarda solo un color medio; tres o cuatro por eje ya hacen reconocible una fotografía.
- El desenfoque se ve lavado. — Sube la intensidad al decodificar: realza el contraste alrededor del color medio y suele leerse mejor como marcador.
Preguntas frecuentes
- ¿Qué es un BlurHash?
- Una cadena compacta que codifica el contenido de baja frecuencia de una imagen: su forma borrosa y sus colores, pensada para guardarse junto a la URL.
- ¿Cuánto ocupa una cadena BlurHash?
- Cuatro caracteres más dos por componente, así que un hash de 4 por 3 son 28 caracteres y uno de 1 por 1 son 6.
- ¿Cuántos componentes conviene usar?
- Cuatro por tres es lo habitual en fotografía; un retrato a veces gana con tres por cuatro y un gráfico plano se ve bien con dos por dos.
- ¿Se sube mi imagen para generar el hash?
- No. La imagen se dibuja en un lienzo y se codifica en tu navegador, así que las fotos nunca salen de tu dispositivo.
Herramientas relacionadas
Todas las herramientas de ArrayKit