Immagine responsive
Un'implementazione dell'immagine che serve dimensioni o formati diversi in base al dispositivo, alla dimensione dello schermo e alla velocità di connessione dell'utente.
Le immagini responsive impediscono agli utenti mobile di scaricare immagini pensate per desktop, che sprecano larghezza di banda e rallentano il caricamento della pagina. HTML offre l'attributo srcset per il cambio di risoluzione e l'elemento picture per l'art direction, così da servire ritagli o formati diversi a dispositivi diversi. Framework moderni come Next.js automatizzano la generazione di immagini responsive, creando più dimensioni da una singola sorgente e servendo la versione ottimale in base al viewport. I formati WebP e AVIF con fallback JPEG riducono ulteriormente la banda. Le immagini responsive sono fondamentali per i Core Web Vitals: un'immagine sovradimensionata ritarda il Largest Contentful Paint, la principale metrica di caricamento che incide sia sull'esperienza utente sia sul posizionamento nei motori di ricerca.