La sezione Opportunità del report Lighthouse elenca tutte le immagini nella tua pagina che non hanno dimensioni appropriate, insieme al potenziale risparmio in kibibyte (KiB). Ridimensiona queste immagini per risparmiare dati e migliorare il tempo di caricamento della pagina:
In che modo Lighthouse calcola le immagini di grandi dimensioni
Per ogni immagine nella pagina, Lighthouse confronta le dimensioni dell'immagine visualizzata con quelle dell'immagine effettiva. Le dimensioni visualizzate tengono conto anche delle proporzioni pixel del dispositivo. Se le dimensioni visualizzate sono inferiori di almeno 4 KiB rispetto alle dimensioni effettive, l'immagine non supera il controllo.
Strategie per ridimensionare correttamente le immagini
Idealmente, nella tua pagina non dovrebbero mai essere pubblicate immagini più grandi della versione visualizzata sullo schermo dell'utente. Qualsiasi valore superiore genera solo byte inutili e rallenta il caricamento della pagina.
La strategia principale per pubblicare immagini di dimensioni appropriate si chiama "immagini adattabili". Con le immagini adattabili, generi più versioni di ogni immagine e specifichi la versione da utilizzare nel codice HTML o CSS utilizzando query supporti, dimensioni dell'area visibile e così via. Inoltre, RespImageLint è un utile bookmarklet per identificare i valori srcset e sizes ottimali per le tue immagini. Per ulteriori informazioni su questi attributi, consulta Pubblicare immagini adattabili.
Le CDN immagine sono un'altra strategia principale per la pubblicazione di immagini di dimensioni appropriate. Puoi pensare alle CDN di immagini come alle API di servizi web per la trasformazione delle immagini.
Un'altra strategia consiste nell'utilizzare formati di immagini vettoriali, come SVG. Con una quantità limitata di codice, un'immagine SVG può essere scalata a qualsiasi dimensione. Per scoprire di più, consulta Sostituire le icone complesse con un file SVG.
Strumenti come gulp-responsive o responsive-images-generator può aiutare ad automatizzare il processo di conversione di un'immagine in più formati. Esistono anche CDN di immagini che ti consentono di generare più versioni, quando carichi un'immagine o quando la richiedi dalla tua pagina.
Indicazioni specifiche per lo stack
AMP
Utilizza il supporto del componente amp-img per srcset al fine di specificare quali asset immagine utilizzare in base alle dimensioni dello schermo. Vedi anche Immagini adattabili con srcset, dimensioni e altezze.
Angular
Potresti utilizzare l'utilità BreakpointObserver nel Kit di sviluppo componenti (CDK) per gestire i punti di interruzione delle immagini.
Drupal
Utilizza la funzionalità integrata Stili di immagini adattabili (disponibile in Drupal 8 e versioni successive) quando esegui il rendering di campi immagine tramite modalità di visualizzazione, visualizzazioni o immagini caricate tramite l'editor WYSIWYG.
Gatsby
Utilizza il plug-in gatsby-image per generare più immagini più piccole per smartphone e tablet. Può anche creare segnaposto per immagini SVG per un caricamento lento efficiente.
Joomla
Valuta la possibilità di utilizzare un plug-in per le immagini adattabili.
WordPress
Carica le immagini direttamente dalla libreria multimediale per assicurarti che siano disponibili le dimensioni delle immagini richieste, quindi inseriscile dalla raccolta multimediale o utilizza il widget immagine per assicurarti che vengano utilizzate le dimensioni ottimali delle immagini (incluse quelle per i punti di interruzione adattabili). Evita di utilizzare immagini Full Size,
a meno che le dimensioni non siano adeguate per il relativo utilizzo. Vedi Inserimento di immagini in post e pagine.