Cuando una foto tarda en llegar, el visitante no solo espera: interpreta que la web «va lenta» o «está rota». Los placeholders LQIP (Low Quality Image Placeholder) y la técnica blur-up muestran primero una versión diminuta y borrosa de la imagen y luego la sustituyen por el archivo definitivo. La transición transmite control y reduce la sensación de hueco en blanco, sobre todo en listados de productos, noticias o casos de éxito.
A finales de octubre de 2026, si ya trabajas lazy loading, reservas espacio con aspect-ratio y vigilas el LCP, los placeholders son el siguiente paso para pulir percepción y CLS sin subir el peso de la página.
Qué es un LQIP y en qué se diferencia del blur-up
Un LQIP es una copia muy comprimida de la misma imagen (a veces 20–40 px de ancho) incrustada en la página o servida como archivo aparte. El navegador la escala y, si aplicas un filtro CSS blur(), el usuario ve un «velo» de color y forma hasta que carga el recurso de calidad.
Blur-up es el patrón de experiencia: mostrar ese LQIP a pantalla completa en el contenedor y, al completar la descarga del JPEG o WebP, hacer un fundido (opacity) hacia la imagen nítida. No es un formato de archivo; es cómo presentas el LQIP.
Otras alternativas —color dominante, SVG de silueta o background-color gris— también reservan espacio, pero el LQIP comunica mejor el contenido real (un rostro, un producto, un escenario) y suele aumentar la confianza en webs B2B donde las fotos venden credibilidad.
Por qué importa en una web de empresa
- Percepción de velocidad: estudios de rendimiento percibido muestran que el cerebro tolera mejor una carga progresiva que un bloque vacío que de pronto «salta».
- Menos abandono en móvil: en 4G irregular, el placeholder confirma que «algo» está llegando; reduces clics frustrados en el botón de contacto.
- Coherencia de marca: un gris genérico en todo el catálogo parece plantilla sin terminar; un LQIP mantiene la paleta de la foto.
- Complemento del diseño responsive: junto con srcset y sizes, el placeholder puede generarse por cada variante o reutilizar uno común si el CMS lo permite.
Cómo implementarlo sin disparar el peso del HTML
1. LQIP en Base64 inline (típico en Gatsby o Next)
El build genera un data URI minúsculo y lo inserta en background-image o en un <img> hermano. Ventaja: cero peticiones extra. Inconveniente: aumenta el HTML; úsalo en heroes y tarjetas clave, no en cientos de filas de catálogo.
2. LQIP como archivo estático
Guardas foto-lqip.jpg (2–8 KB) junto a foto.jpg. El HTML referencia primero el pequeño con fetchpriority="low" y sustituye el src al cargar el grande. Mejor para CMS con muchas entradas porque el HTML no crece.
3. Blur-up con dos capas CSS
.media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.media__lqip,
.media__full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.media__lqip {
filter: blur(20px);
transform: scale(1.05);
}
.media__full {
opacity: 0;
transition: opacity 400ms ease;
}
.media.is-loaded .media__full { opacity: 1; }El contenedor con aspect-ratio evita saltos mientras ambas capas comparten el mismo marco. Cuando el JPEG grande termina de decodificar, añades la clase is-loaded con JavaScript o con el evento onload del img.
Relación con LCP, lazy loading y decoding
Nunca apliques blur-up con lazy loading en la imagen LCP (hero above the fold). Esa imagen debe cargarse con loading="eager", fetchpriority="high" si procede, y sin retrasar su URL detrás de un placeholder pesado en Base64 que infla el HTML crítico.
Sí puedes usar LQIP en:
- Galerías bajo el pliegue.
- Entradas de blog relacionadas.
- Logos de clientes en carrusel.
- Miniaturas de equipo o sedes.
Combina decoding="async" en imágenes no críticas para no bloquear el hilo principal mientras se desenfoca la transición.
Generar LQIPs en tu flujo de contenidos
En proyectos que mantenemos en aatsoft solemos automatizar en el pipeline de assets:
- Al subir una foto al CMS, crear variante LQIP (ancho máx. 32 px, calidad 40–50).
- Guardar metadatos
width,heighty ruta LQIP en la ficha del medio. - En plantilla, imprimir wrapper con ratio fijo y ambas URLs.
- Medir en Lighthouse que el LCP sigue siendo el hero, no el placeholder de un listado.
Herramientas como Sharp, ImageMagick o plugins de WordPress pueden generar el thumbnail borroso en el servidor. Si usas CDN con transformación de imagen, algunos proveedores exponen parámetros de «blur» o «quality» para la primera petición; evalúa coste y caché.
Errores que vemos en auditorías
- Base64 enorme en cada tarjeta — Infla el TTFB percibido del documento; mejor archivo externo cacheable.
- Placeholder sin dimensiones — Sin
width/heightoaspect-ratio, el blur-up no evita CLS. - Mismo LQIP para srcset distintos — En retina puede verse pixelado; genera LQIP por ratio, no por archivo absoluto.
- Animación larga — Transiciones de más de 500 ms en catálogos masivos cansan; 200–400 ms suele bastar.
- Olvidar accesibilidad — El
altva en la imagen final visible; el LQIP decorativo puede llevaralt=""si es puramente ornamental.
Checklist antes de publicar en producción
- Hero LCP sin lazy load y con peso optimizado (formatos modernos).
- Placeholders solo bajo el pliegue o en listados.
- Contenedor con ratio y
object-fit: coversi recortas. - Prueba en 3G lento en DevTools: ¿el usuario entiende qué va a aparecer?
- CLS < 0,1 en field data si ya tienes RUM.
Conclusión
Los placeholders LQIP y el blur-up no sustituyen a comprimir bien tus fotos ni a elegir el tamaño correcto con srcset, pero sí convierten una espera técnica en una experiencia cuidada. En una web de empresa, esa diferencia se nota en la credibilidad del catálogo, la lectura de noticias y la paciencia del visitante móvil.
Si quieres revisar cómo está montado tu catálogo o tu blog —LCP, lazy loading y placeholders— en aatsoft podemos auditar el rendimiento real y proponerte cambios en plantilla sin perder el diseño que ya funciona en ventas.
