Arrastrá una imagen o hacé clic para seleccionar
PNG, JPEG, WebP, GIF, BMP, AVIF
Cómo funciona
Un marcador de posición es lo que ocupa el lugar de una imagen mientras se descarga. Sirve para dos cosas distintas: reservar el espacio exacto que va a ocupar, de modo que el texto de alrededor no salte cuando la imagen aparece, y mostrar algo parecido al contenido final para que la espera se perciba más corta que frente a un rectángulo gris.
Hay tres familias de solución. Los hash compactos (BlurHash y ThumbHash) resumen la imagen en una cadena de texto tan corta que la podés guardar en una columna de la base de datos junto al resto del registro; el navegador la decodifica y dibuja el borroso. Los data-URI (la miniatura LQIP y el SVG) llevan la imagen ya codificada dentro del HTML o del CSS, así que no necesitan nada de JavaScript. Y el color plano es el marcador más barato de todos: siete caracteres.
Cuál conviene depende de dónde nace el HTML. Si las imágenes vienen de una base de datos y las listás de a cientos, el hash es lo más liviano por registro. Si generás páginas estáticas o usás un framework que ya soporta marcadores, el data-URI evita agregar código de decodificación. Todos los valores que ves acá se calculan en tu navegador: la imagen no se sube a ningún servidor.
Ejemplos
blurhash 4 × 3LGHC162?|cKNqSWDjtaghVfjfQfjEl largo de un BlurHash depende sólo de la cantidad de componentes, no del tamaño ni del contenido de la imagen: con 4 × 3 siempre son 28 caracteres, con 3 × 3 son 22 y con 5 × 4 son 44.thumbhash3wcKNZpwh3eAiIh3iHiIiHCAB/eHUn ThumbHash ocupa entre 17 y 25 bytes, es decir 24 a 36 caracteres en Base64. El tamaño exacto depende de la proporción de la imagen y de si tiene transparencia, porque el formato también codifica el canal alfa.lqip 24 px webpdata:image/webp;base64,UklGRi…Una miniatura de 24 px de ancho en WebP suele quedar por debajo de 1 KB. Al incrustarse en el HTML no genera un pedido extra, pero sí engorda el documento, que no se cachea por separado.Casos de uso
- Guardar un BlurHash o ThumbHash en la tabla de imágenes para que un listado o un feed con scroll infinito muestre algo desde el primer instante.
- Completar el atributo blurDataURL de next/image o el placeholder de NgOptimizedImage cuando la imagen no es un import estático.
- Evitar el salto de maquetado (CLS) en tarjetas de producto o de artículo, combinando el marcador con los atributos width y height.
- Incrustar un marcador en HTML estático, un correo o una plantilla donde no podés ejecutar JavaScript de decodificación.
- Reutilizar el mismo BlurHash en la web y en las apps móviles, que cuentan con decodificadores en Swift, Kotlin y Flutter.
- Tomar el color promedio como fondo de un contenedor cuando el presupuesto de bytes no admite ni siquiera una miniatura.
Preguntas frecuentes
¿BlurHash o ThumbHash?
ThumbHash reproduce la imagen con más fidelidad en menos bytes, conserva la transparencia y guarda la proporción, así que ni siquiera necesitás saber el tamaño original para dibujarlo. BlurHash es anterior y menos preciso, pero tiene implementaciones para muchas más plataformas y lenguajes. Si empezás de cero, ThumbHash; si ya tenés decodificadores de BlurHash en tu stack, no hay razón para migrar.
¿Esto mejora el LCP?
No directamente. El marcador mejora la percepción de velocidad y, junto con width y height, elimina el salto de maquetado, pero la métrica LCP se sigue midiendo cuando termina de pintarse la imagen real. Es más: si la imagen principal es el elemento LCP, no le pongas loading="lazy" ni la difieras detrás de un marcador; conviene marcarla con fetchpriority="high" para que el navegador la pida antes. Los marcadores son para las imágenes que están fuera de la primera pantalla.
¿Cuántos componentes conviene usar en el BlurHash?
Cuatro por tres funciona bien en imágenes apaisadas y tres por cuatro en verticales. Cada componente adicional agrega dos caracteres y un poco más de detalle, pero por encima de seis o siete la diferencia deja de notarse a simple vista, porque el resultado se muestra desenfocado de todos modos.
¿Hash o data-URI?
El hash ocupa unas decenas de bytes por imagen y es ideal cuando hay muchas en la misma página, pero exige código en el cliente que lo decodifique. El data-URI no necesita nada, aunque pesa entre diez y cincuenta veces más y viaja dentro del HTML, que no se cachea aparte. Con pocas imágenes destacadas conviene el data-URI; con listados largos, el hash.
¿Por qué usar el SVG en vez de la miniatura directamente?
Porque el desenfoque lo aplica el navegador al dibujar el SVG. Eso te permite partir de una miniatura mucho más chica sin que se vean los bloques de píxeles al ampliarla, y el resultado se ve igual de suave en cualquier tamaño. El SVG también fija el alfa como opaco, para que el desenfoque no transparente los bordes.
¿Hay un límite de tamaño para el marcador?
Depende de la herramienta. NgOptimizedImage de Angular avisa por consola cuando el data-URI del placeholder supera los 4000 caracteres, porque a partir de ahí el peso del HTML empieza a pesar más que el beneficio. Es una buena referencia general: si tu miniatura pasa ese valor, bajá el ancho o la calidad.