Immagine reattiva
Un'implementazione di immagine che offre dimensioni o formati diversi in base al dispositivo dello spettatore, alle dimensioni dello schermo e alla velocità di connessione.
Le immagini reattive impediscono agli utenti mobili di scaricare immagini di dimensioni desktop che sprecano larghezza di banda e rallentano il caricamento delle pagine. L'HTML fornisce l'attributo srcset per il cambio di risoluzione e l'elemento immagine per la direzione artistica, offrendo ritagli o formati diversi a dispositivi diversi. Framework moderni come Next.js automatizzano la generazione di immagini reattive, creando più dimensioni da un'unica fonte e fornendo la versione ottimale in base al viewport. WebP e AVIF fAVIFts con JPEG fallbacJPEGr riducono inoltre la larghezza di banda. Le immagini reattive sono fondamentali per le prestazioni dei Core Web Vitals: un'immagine sovradimensionata ritarda il Largest Contentful Paint, la metrica principale delle prestazioni di caricamento che influisce sia sull'esperienza dell'utente che sul posizionamento nei motori di ricerca.