Image Handling
Image Handling
4 reglasBlur-up LQIP: secuencia de 3 pasos
El patrón blur-up mejora la percepción de carga: 1) mostrar el placeholder de color/dominante, 2) mostrar LQIP (imagen de 20px desenfocada) mientras carga la imagen real, 3) hacer crossfade a resolución completa. La percepción de carga mejora 40% versus mostrar nada hasta que carga completa.
investigación 2026color dominante
desenfocado
completa
img.loaded { filter:blur(0); }
Aspect ratio containers reservan espacio
Un container con aspect-ratio: 16/9 reserva el espacio exacto que ocupará la imagen antes de que cargue, eliminando el layout shift (CLS). Sin este patrón, el contenido debajo salta cuando la imagen carga, generando una experiencia desorientadora y penalizando el Core Web Vitals.
srcset y picture para contexto
Una sola imagen para todos los dispositivos sirve mal a todos. srcset con tamaños (400w, 800w, 1600w) permite que el navegador elija según el viewport y la densidad de pantalla. <picture> va más allá y permite servir WebP en navegadores modernos con fallback JPG, o imágenes de arte diferente para mobile vs desktop.
<source type="image/webp"
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1600.webp 1600w"
sizes="(max-width:600px) 100vw, 50vw">
<img src="hero-800.jpg" alt="..."
loading="lazy" decoding="async">
</picture>
Estado de imagen rota con fallback
Cuando una imagen falla en cargar, el icono roto del navegador es inaceptable en una UI de calidad. El manejador onerror debe sustituir la imagen por un fallback apropiado: avatar con iniciales, placeholder de categoría o ilustración genérica. El contenedor mantiene su tamaño intacto.