Imagen Responsiva
Una implementación de imagen que ofrece diferentes tamaños o formatos según el dispositivo del espectador, el tamaño de la pantalla y la velocidad de conexión.
Las imágenes responsivas evitan que los usuarios de dispositivos móviles descarguen imágenes del tamaño de una computadora de escritorio que desperdician ancho de banda y ralentizan la carga de las páginas. HTML proporciona el atributo srcset para cambiar la resolución y el elemento de imagen para la dirección de arte, ofreciendo diferentes cultivos o formatos a diferentes dispositivos. Los marcos modernos como Next.js automatizan la generación de imágenes responsivas, creando múltiples tamaños a partir de una única fuente y ofreciendo la versión óptima según la ventana gráfica. WebP y AVIF fAVIFts con JPEG fallbacJPEGr reducen aún más el ancho de banda. Las imágenes responsivas son fundamentales para el rendimiento de Core Web Vitals: una imagen de gran tamaño retrasa el Largest Contentful Paint, la principal métrica de rendimiento de carga que afecta tanto a la experiencia del usuario como a la clasificación en los motores de búsqueda.