Nella sezione Opportunità del report Lighthouse sono elencate tutte le immagini della pagina che non sono di dimensioni adeguate, insieme ai potenziali risparmi 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 della pagina, Lighthouse confronta le dimensioni dell'immagine visualizzata con quelle dell'immagine effettiva. Le dimensioni visualizzate tengono conto anche del rapporto pixel del dispositivo. Se le dimensioni visualizzate sono inferiori di almeno 4 KB rispetto a quelle effettive, l'immagine non supera il controllo.
Strategie per le dimensioni delle immagini
Idealmente, la tua pagina non dovrebbe mai pubblicare immagini più grandi della versione visualizzata sullo schermo dell'utente. Un valore superiore comporta solo uno spreco di byte e rallenta il tempo di caricamento della pagina.
La strategia principale per pubblicare immagini di dimensioni appropriate è chiamata "immagini adattabili". Con le immagini responsive, generi più versioni di ogni immagine,
quindi specifichi quale utilizzare in HTML o CSS utilizzando query supporti, dimensioni del viewport e così via. Inoltre, RespImageLint è un bookmarklet utile per identificare i valori ottimali di srcset e sizes per le immagini. Per scoprire di più su questi attributi, consulta Pubblicare immagini adattabili.
Le CDN di immagini sono un'altra strategia principale per pubblicare immagini di dimensioni adeguate. Puoi considerare le CDN di immagini come API di servizi web per la trasformazione delle immagini.
Un'altra strategia consiste nell'utilizzare formati di immagini basati su vettori, come SVG. Con una quantità limitata di codice, un'immagine SVG può essere ridimensionata in base alle dimensioni richieste. Per scoprire di più, consulta la sezione Sostituire le icone complesse con un formato SVG.
Strumenti come gulp-responsive o responsive-images-generator possono aiutarti 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 la richiedi dalla tua pagina.
Indicazioni specifiche per lo stack
AMP
Utilizza il supporto del componente amp-img per srcset per specificare quali asset immagine utilizzare in base alle dimensioni dello schermo. Consulta anche Immagini responsive con srcset, dimensioni e altezze.
Angular
Potresti utilizzare l'utilità BreakpointObserver nel Component Dev
Kit (CDK) per gestire i punti di interruzione delle immagini.
Drupal
Assicurati di utilizzare gli stili di immagini adattabili nativi forniti da Drupal. Utilizza gli stili di immagini adattabili per il rendering dei campi immagine con modalità di visualizzazione, visualizzazioni o immagini caricate tramite l'editor WYSIWYG.
Gatsby
Utilizza il plug-in gatsby-image per generare più immagini di dimensioni ridotte per smartphone e tablet. Può anche creare segnaposto di immagini SVG per un caricamento lento efficiente.
Joomla
Valuta la possibilità di utilizzare un plug-in di immagini adattabili.
WordPress
Carica le immagini direttamente tramite la libreria multimediale per assicurarti che siano disponibili le dimensioni delle immagini richieste, quindi inseriscile dalla libreria multimediale o utilizza il widget per immagini per assicurarti che vengano utilizzate le dimensioni ottimali (incluse quelle per i punti di interruzione adattabili). Evita di utilizzare immagini Full Size, a meno che le dimensioni non siano adatte all'utilizzo previsto. Consulta l'articolo Inserire immagini in post e pagine.