Cómo usar: Generador de BlurHash y LQIP
- Elige una foto (o prueba el ejemplo). Todo funciona en tu navegador.
- Ajusta el nivel de detalle de BlurHash: 4 × 3 suele ir bien para la mayoría de las fotos de paisajes; cuantos más componentes, más formas se conservan, pero la cadena resulta más larga.
- Elige el ancho y el formato del LQIP: un archivo WebP de 16 píxeles suele ocupar menos de 1 KB.
- Copia la cadena de BlurHash, el URI de datos o el código listo para usar en HTML/CSS, Next.js o React. A continuación.
Tres tipos de marcadores de posición
| Marcador de posición | Tamaño | Ideal para |
|---|---|---|
| Color principal | 7 caracteres | Cuadrículas de miniaturas; la opción más sencilla |
| BlurHash | 20-30 caracteres | Se guarda en una base de datos o en la respuesta de la API junto a la URL de la imagen; se decodifica en píxeles en la app |
| LQIP (imagen en base64) | Menos de 1 KB | Incrustado en HTML o CSS, Next.js blurDataURL; funciona sin JavaScript |
Cómo funciona BlurHash
BlurHash describe una imagen con unas cuantas ondas cosinusoidales, como si fuera un JPEG de muy baja resolución. La imagen se convierte en luz lineal, se multiplica por patrones cosinusoidales en cada dirección, y los factores resultantes se cuantifican y se escriben con un alfabeto de 83 caracteres. Al decodificarla, se vuelven a dibujar esas mismas ondas, lo que da como resultado un desenfoque suave con los colores y la disposición aproximada de la imagen. Decódiala a unos 32 × 32 píxeles y amplíala con CSS: está pensada para que quede borrosa.
Establece siempre width y height (o aspect-ratio) en la imagen para que el marcador de posición reserve su espacio y nada se desplace cuando llegue la foto. Comprime también la imagen completa con el Compresor de imágenes.
También se busca como: generador de blurhash, generador lqip, generador de imágenes de relleno, marcador de posición difuminado, nextjs blurdataurl, blurhash en línea, marcador de posición de imagen de baja calidad, carga progresiva de imágenes.
Herramientas que combinan con: Generador de BlurHash y LQIP
- Cambiador de tamaño de imágenes — Cambia el tamaño de una foto a unas dimensiones exactas en píxeles o a un porcentaje, recórtala para que se adapte al tamaño de las redes sociales o encájala en un marco con un color de fondo, todo ello directamente en tu navegador.
- Imagen a Base64 — Convierte un archivo PNG, JPEG, SVG, WebP o GIF en un URI de datos Base64 con código CSS y HTML listo para copiar, o pega una cadena Base64 para ver una vista previa y descargar la imagen.
- Convertidor de imágenes — Convierte cualquier imagen que tu navegador pueda abrir —PNG, JPG, WebP, AVIF, GIF, BMP o SVG— a PNG, JPG, WebP o AVIF, ya sea un archivo o cientos a la vez.
- Page Speed Test — Run Google Lighthouse on any URL for mobile or desktop.