Imagen adaptable
Una implementación de imagen que entrega distintos tamaños o formatos según el dispositivo, el tamaño de pantalla y la velocidad de conexión del usuario.
Las imágenes adaptables evitan que los usuarios móviles descarguen imágenes de tamaño de escritorio que desperdician ancho de banda y ralentizan la carga de la página. HTML ofrece el atributo srcset para cambiar la resolución y el elemento picture para dirección de arte, lo que permite servir recortes o formatos distintos a cada dispositivo. Frameworks modernos como Next.js automatizan la generación de imágenes adaptables, crean varios tamaños desde una sola fuente y entregan la versión óptima según el viewport. Los formatos WebP y AVIF con respaldo JPEG reducen aún más el ancho de banda. Las imágenes adaptables son clave para Core Web Vitals: una imagen demasiado grande retrasa Largest Contentful Paint, la métrica principal de rendimiento de carga que afecta tanto a la experiencia del usuario como al posicionamiento en buscadores.