Generador de BlurHash y placeholders LQIP
Convierte una imagen en una cadena BlurHash de ~30 caracteres que decodifica en milisegundos: el placeholder borroso que ves en Instagram o Mastodon mientras carga la foto real. Vista previa decodificada al instante, ajuste de componentes y snippets listos para HTML, CSS o React.
Suelta una imagen aquí o haz clic para elegirla
Se muestrea a 100 px de ancho en tu navegador: la imagen nunca sale de tu equipo.
<div class="blurhash-container">
<canvas id="placeholder" width="32" height="24"></canvas>
<img src="foto.jpg" onload="this.style.opacity=1" style="opacity:0;transition:opacity .3s" />
</div>
<style>
.blurhash-container { position: relative; }
.blurhash-container img { position: absolute; inset: 0; width: 100%; height: 100%; }
</style>
<script type="module">
import { decode } from "blurhash";
const ctx = document.getElementById("placeholder").getContext("2d");
const img = ctx.createImageData(32, 24);
img.data.set(decode("LEHV6nWB2yk8pyo0adR*.7kCMdnj", 32, 24));
ctx.putImageData(img, 0, 0);
</script>import { Blurhash } from "react-blurhash";
<Blurhash
hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
width={256}
height={192}
resolutionX={32}
resolutionY={24}
punch={1}
/>;Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Un placeholder LQIP evita el salto visual en blanco cuando una imagen tarda en cargar: se muestra una versión borrosa de 30 caracteres en lugar de 3 MB. Esta herramienta implementa el algoritmo BlurHash completo en tu navegador: la imagen se muestrea a 100 px de ancho (sin subirla a ningún sitio), se convierte a espacio lineal y se descompone en componentes de coseno DCT-II que se cuantizan en Base83. El decodificador es idéntico byte a byte al paquete oficial de Wolt — verificado con un banco de pruebas automatizado — y el encoder sigue el algoritmo de referencia tomando el máximo sobre valores absolutos, lo que produce hashes con mayor fidelidad que el paquete npm en imágenes donde el rango AC es predominantemente negativo. Ajusta las componentes 4×3 para fotos, menos componentes para placeholders más compactos.
Características
- ✓Encode y decode del algoritmo BlurHash completo, implementado a mano
- ✓Vista previa decodificada en vivo con número de componentes ajustable (1-9 × 1-9)
- ✓Snippets listos: HTML+CSS con técnica blur-up y componente React
- ✓Validador: pega cualquier hash y se decodifica al momento
- ✓Verificado contra el paquete oficial de Wolt: decode idéntico byte a byte y mayor fidelidad de encode
¿Cómo generar un placeholder con BlurHash?
- 1
Sube o suelta la imagen
Se muestrea a 100 px y se codifica al instante; la imagen no sale de tu navegador.
- 2
Ajusta las componentes
Más componentes (6×4 o 8×5) capturan más detalle; 4×3 o 3×2 bastan para la mayoría de fotos.
- 3
Comprueba la vista previa
El lienzo muestra el resultado decodificado: si pierde rasgos importantes, sube el número de componentes.
- 4
Copia hash o snippet
Guarda el hash en tu CMS o copia el snippet HTML+CSS blur-up o el componente React listo para pegar.
Preguntas frecuentes
¿Qué son las componentes X e Y y cuántas debo usar?
El hash guarda una aproximación de la imagen como suma de ondas coseno: X componentes por ancho e Y por alto. 4×3 (por defecto) captura bien una foto normal con ~28 caracteres. Más componentes = más detalle pero hash más largo y más CPU al decodificar. Para fondos o imágenes planas basta 1×1; para logotipos con bordes duros sube a 8×5.
¿Dónde guardo el hash y cuándo se decodifica?
Guarda el hash junto a la URL de la imagen (una columna extra en tu base de datos o un atributo data- en el HTML). Se decodifica en el cliente en unos milisegundos — es una pequeña matriz de cosenos, no requiere la imagen — y se pinta en un canvas o se convierte en PNG diminuto con CSS blur encima. Cuando la imagen real llega, aparece con un fundido sobre el placeholder.
¿Es idéntico al paquete oficial de blurhash?
El decodificador sí: byte a byte idéntico, verificado automáticamente contra el paquete npm oficial. El encoder sigue el algoritmo de referencia tomando el máximo de la energía AC sobre valores absolutos; en los casos donde el paquete npm produce hashes de menor fidelidad (por no usar el valor absoluto al cuantizar el rango), aquí el placeholder conserva más detalle. La estructura del hash es la misma estándar y cualquier decodificador BlurHash puede leerlo.
Herramientas relacionadas
Incrusta Generador de BlurHash (LQIP) en tu web
Integra Generador de BlurHash (LQIP) en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/blurhash-placeholder"
width="100%"
height="700"
frameborder="0"
title="Generador de BlurHash (LQIP) — miguelacm.es"
></iframe>