Generador de placeholders BlurHash, ThumbHash y LQIP

Qué es un placeholder de imagen y por qué lo necesitas

Un placeholder es lo que el usuario ve en el hueco de una imagen mientras esta se descarga. Sin él, la página muestra un rectángulo vacío (o nada) y, cuando la imagen llega, aparece de golpe. Con él, el hueco se rellena desde el primer momento con una versión muy borrosa o con el color principal de la foto, y la imagen final aparece encima con una transición suave.

Esto no es solo estética. Un buen placeholder:

• Reduce la sensación de espera. El usuario percibe que la página ya está ahí aunque las imágenes tarden. En conexiones móviles lentas la diferencia es muy notable.
• Evita saltos de contenido, siempre que vaya acompañado de width y height o de aspect-ratio. El espacio de la imagen está reservado desde el primer pintado, así que el CLS (Cumulative Layout Shift) no se ve afectado.
• Da continuidad visual en galerías, tiendas online y feeds infinitos, donde hay decenas de imágenes cargando a la vez.

La clave es que el placeholder sea diminuto, normalmente menos de 300 bytes, para poder incrustarlo directamente en el HTML o en el JSON de tu API sin añadir peticiones ni retrasar nada.

Cómo usar el generador

1. Suelta, pega (Ctrl+V) o elige tus imágenes. Puedes añadir tantas como quieras. Se procesan en tu navegador y no se suben a ningún servidor.
2. Elige el tipo de placeholder en las pestañas de vista previa: LQIP, BlurHash, ThumbHash, color o degradado. A la izquierda verás cómo queda el hueco mientras carga y a la derecha la imagen original.
3. Ajusta si hace falta el número de componentes de BlurHash o el tamaño del LQIP en Ajustes avanzados. Los valores por defecto funcionan bien para la mayoría de fotos.
4. Copia el código para tu stack: next/image, HTML con CSS, React con BlurHash o ThumbHash.
5. Descarga el JSON con los datos de todas las imágenes si quieres guardarlos en tu base de datos, CMS o archivo de contenido.

Los cinco tipos de placeholder, explicados

LQIP (blurDataURL)

LQIP son las siglas de Low Quality Image Placeholder: una versión de la propia imagen reducida a unos 16 píxeles y codificada en base64 como data URI. Es exactamente lo que espera la propiedad blurDataURL del componente Image de Next.js cuando usas placeholder="blur".

El generador crea un WebP de 16 px con calidad media, que suele ocupar entre 100 y 250 bytes. Si tu navegador no puede exportar WebP desde canvas (Safari), usa JPEG o PNG si la imagen tiene transparencia. Al mostrarse se le aplica un desenfoque CSS (filter: blur(20px)) para que no se vean los píxeles.

Ventajas: no necesita JavaScript para decodificarse, funciona en cualquier <img> o fondo CSS y Next.js lo integra de serie. Inconveniente: es algo más pesado que un hash.

BlurHash

BlurHash codifica la imagen como una suma de ondas de color (componentes de una transformada del coseno) en una cadena de unos 20-30 caracteres, por ejemplo LKO2:N%2Tw=w]~RBVZRi};RPxuwH. Para mostrarlo hay que decodificarlo con JavaScript en un <canvas>, lo que hacen librerías como react-blurhash o blurhash en web, iOS y Android.

El número de componentes controla el detalle: con 4×3 (el valor por defecto) se captan las masas de color principales de una foto horizontal. Para imágenes verticales prueba 3×4 y para fotos con mucho detalle hasta 6×5, sabiendo que el hash crece con cada componente.

Ventajas: cadena muy corta, ideal para guardar en una base de datos o enviar en una API, y librerías disponibles para casi todas las plataformas. Inconveniente: requiere JavaScript y no conserva la relación de aspecto, que debes guardar aparte.

ThumbHash

ThumbHash es una alternativa más reciente a BlurHash creada por Evan Wallace (cofundador de Figma). Codifica en unos 25-35 bytes, que se muestran como unos 30-45 caracteres en base64, más detalle que BlurHash, la relación de aspecto aproximada y el canal alfa, así que funciona con PNG transparentes. La función thumbHashToDataURL lo convierte directamente en una imagen que puedes usar como fondo.

Ventajas: mejores colores y contraste, transparencia y proporción incluidas. Inconveniente: algo menos extendido que BlurHash fuera de la web.

Color dominante

El placeholder más ligero posible: un solo color hexadecimal, como #3a5f7d, que se aplica como background-color del contenedor. El generador agrupa los píxeles en cubos de color y devuelve el más frecuente, que suele coincidir mejor con la percepción que la media aritmética.

Es la técnica que usan Pinterest y Google Imágenes: cero bytes extra en peticiones, cero JavaScript, y la cuadrícula se ve ordenada mientras carga.

Degradado CSS

Un linear-gradient con el color medio de la mitad superior y de la mitad inferior de la imagen. Ocupa unos 60 caracteres, no necesita JavaScript y transmite mejor que un color plano la idea de "cielo arriba, suelo abajo" de muchas fotografías.

Cuál elegir según tu proyecto

Una regla práctica: si el placeholder va a estar en el HTML inicial, usa algo que no necesite JavaScript (LQIP, color o degradado). Si va en datos que consume un cliente (JSON, GraphQL), un hash corto es más cómodo.

Errores habituales

• Olvidar width y height. Un placeholder sin dimensiones no reserva espacio y el contenido salta igualmente. Copia las dimensiones que muestra el generador.
• Usar un LQIP demasiado grande. A partir de 32 px el data URI supera fácilmente 1 KB por imagen, y con 30 imágenes en una página estás inflando el HTML en 30 KB que bloquean el renderizado.
• Poner placeholder a la imagen LCP y diferirla. El placeholder no sustituye a cargar pronto la imagen principal: usa fetchpriority="high" en ella. Lo explicamos en la guía de lazy loading y fetchpriority.
• Calcular los placeholders en cada petición. Genéralos una vez al subir la imagen y guárdalos; recalcularlos en el servidor en cada visita desperdicia CPU.

Preguntas frecuentes

¿Se suben mis imágenes a algún servidor?

No. Todo el cálculo se hace en tu navegador con canvas y JavaScript. Las imágenes no salen de tu dispositivo y se descartan al cerrar la página.

¿Qué diferencia hay entre BlurHash y ThumbHash?

Ambos codifican una versión muy borrosa de la imagen en pocos bytes. ThumbHash conserva mejor los colores, guarda la proporción y admite transparencia; BlurHash está más extendido y tiene librerías para más plataformas.

¿Cómo uso el blurDataURL con imágenes remotas en Next.js?

Guarda el blurDataURL junto a la URL de la imagen (en tu CMS o base de datos) y pásalo al componente Image con placeholder="blur". Next.js solo lo genera automáticamente para imágenes importadas estáticamente.

¿Cuánto pesa cada placeholder?

El LQIP de 16 px suele ocupar entre 100 y 250 bytes, el BlurHash 4×3 unos 28 caracteres, el ThumbHash unos 30-45 caracteres y el color dominante 7 caracteres.

¿Puedo generar placeholders para cientos de imágenes?

Sí. Suelta todas a la vez y descarga el JSON con los datos de cada archivo, indexados por nombre, para importarlos en tu proyecto.

¿Funciona con SVG, GIF o AVIF?

Sí, con cualquier formato que tu navegador sepa mostrar. En los GIF animados se usa el primer fotograma.