Resumen: un placeholder borroso no es decoración — es una corrección del Cumulative Layout Shift disfrazada de efecto de carga, ya que un placeholder correctamente dimensionado reserva el espacio exacto de la imagen antes de que llegue el archivo real. Combina esta guía con Character Counter, Encoding Converter, Text Difference y AI Hidden Characters.

LQIP (Low Quality Image Placeholder) es una versión minúscula y muy comprimida de la imagen real — a menudo 20×20 píxeles o menos, unos pocos cientos de bytes — mostrada borrosa y ampliada mientras se carga el archivo de resolución completa.

El problema real que resuelve LQIP: desplazamiento de diseño, no estética

Sin un placeholder que reserve las dimensiones finales de la imagen, la página se renderiza sin espacio para la imagen, luego empuja todo lo que está debajo hacia abajo en el momento en que llega el archivo — el Cumulative Layout Shift (CLS), una de las Core Web Vitals de Google, penaliza exactamente esto. Un placeholder con la misma relación de aspecto (borroso o no) ocupa el espacio correcto desde el primer renderizado, así que nada se mueve cuando carga la imagen real — el desenfoque es un extra sobre la verdadera corrección, que es reservar el espacio.

Cómo se integra al instante una imagen minúscula

Los placeholders LQIP típicamente se integran como URIs de datos codificados en base64 directamente en el HTML — <img src="data:image/jpeg;base64,..."> — así el placeholder se renderiza con cero solicitudes de red adicionales, lo cual importa porque todo el punto es mostrar algo antes de que siquiera se resuelva la solicitud de la imagen real. Como la imagen fuente es minúscula (a menudo menos de 1KB antes de codificar), la sobrecarga del base64 — aproximadamente 33% más grande que los bytes crudos — es insignificante para un placeholder a pesar de ser derrochadora para una imagen de tamaño completo.

LQIP vs. un placeholder de color dominante sólido

Una micro-miniatura borrosa lleva más información visual (formas aproximadas, distribución de colores) que un simple rectángulo de color dominante, pero también significa más trabajo de configuración — generar y almacenar una imagen pequeña por foto, contra calcular un solo color promedio. Para una galería de fotos intensiva donde la imagen misma es el punto, la fidelidad extra de LQIP usualmente vale la pena; para imágenes de UI más pequeñas o iconos, un placeholder de color plano hace el trabajo de prevención de CLS con menos sobrecarga.

Un flujo de trabajo para añadir placeholders correctamente

  1. Establece un width y height explícitos (o un aspect-ratio CSS) en cada etiqueta de imagen — esto es lo que realmente reserva el espacio; la imagen placeholder en sí no lo hace sola.
  2. Genera el placeholder minúsculo con la verdadera relación de aspecto de la imagen, no con un tamaño fijo que no coincida — una relación desajustada produce un desplazamiento cuando la imagen real la reemplaza.
  3. Integra el placeholder como URI de datos base64 para carga con cero solicitudes, reservado solo para imágenes placeholder genuinamente pequeñas.
  4. Prueba con la limitación de red del navegador — el valor de un placeholder solo se manifiesta cuando la imagen real tarda en llegar.

Errores comunes que evitar

  • Añadir un efecto de desenfoque sin también establecer dimensiones explícitas — el desenfoque solo no hace nada por el desplazamiento de diseño.
  • Usar un placeholder con una relación de aspecto diferente a la imagen real, lo que causa un desplazamiento de todos modos cuando se reemplaza.
  • Integrar en base64 una imagen de tamaño completo "por consistencia", inflando el peso de la página sin ningún beneficio de placeholder.
  • Tratar LQIP puramente como un efecto visual y pasar por alto que su verdadero trabajo es reservar espacio de diseño.

El desenfoque es lo que notan los usuarios; la reserva de dimensiones debajo es lo que realmente protege tu puntuación Core Web Vitals.