Carga de imágenes
Siete técnicas para que las imágenes lleguen sin saltos de layout y con buena percepción de velocidad. Baja por la página: cada bloque carga solo cuando se acerca.
1. Lazy load con IntersectionObserver
Cada imagen reserva su proporción (aspect-ratio) y empieza a cargar 200 px antes de entrar en pantalla.
2. Blur-up (LQIP)
Una versión diminuta de 20 px se muestra desenfocada y la imagen final la reemplaza con un fundido.
3. Color dominante y fundido
El fondo toma el color medio de la imagen mientras carga; sin shimmer, solo fade-in.
4. Imagen rota con reintento
Sube el slider de fallos: la tarjeta muestra el error y un botón para reintentar sin recargar la página.
5. Galería masonry
Alturas distintas, columnas CSS y proporciones reservadas: nada se mueve cuando llegan las fotos.
6. Carga por franjas (progresiva)
La imagen se revela de arriba hacia abajo en pasos, como un JPEG progresivo.
7. Avatares con iniciales
Mientras llega la foto se muestran las iniciales; si no hay foto, quedan las iniciales.