Migliora il caricamento delle immagini

Data di pubblicazione: 8 ott 2025

La riduzione del tempo di download delle immagini può migliorare il tempo di caricamento percepito della pagina e il LCP.

Come non riesce l'insight

L'approfondimento evidenzia le immagini con dimensioni di download inutilmente grandi. Il risparmio stimato di byte viene calcolato confrontando le dimensioni del download dell'immagine con un rapporto byte/pixel efficiente per il formato dell'immagine.

Insight Migliora il caricamento delle immagini di DevTools
Approfondimento Miglioramento della pubblicazione delle immagini di DevTools

Come migliorare il tempo di download delle immagini

Esistono diverse strategie consigliate da questo approfondimento per migliorare il tempo di download delle immagini a seconda delle dimensioni visualizzate e del formato del file. L'implementazione di una CDN per le immagini può essere estremamente utile per tutte queste strategie.

Aumentare il fattore di compressione dell'immagine

La maggior parte dei formati immagine supporta un livello di compressione che può essere ottimizzato per migliorare le dimensioni del file immagine a scapito della qualità dell'immagine. Puoi utilizzare strumenti per le immagini come ImageOptim, Squoosh e Imagemin per ottimizzare il fattore di compressione delle immagini.

Utilizzare formati delle immagini moderni

AVIF e WebP sono formati di immagine che presentano caratteristiche di compressione e qualità superiori rispetto ai formati JPEG e PNG precedenti. La codifica delle immagini in questi formati più recenti è una buona strategia per ridurre le dimensioni di download delle immagini.

AVIF è supportato nell'ultima versione di tutti i principali browser e offre dimensioni dei file più ridotte rispetto ad altri formati con le stesse impostazioni di qualità. Per saperne di più su AVIF, consulta Serving AVIF Images Codelab.

WebP è supportato da tutti i principali browser e offre una compressione migliore con e senza perdita di dati per le immagini sul web. Per saperne di più su WebP, consulta la sezione Utilizzare immagini WebP.

Usa formati video per i contenuti animati

I file GIF di grandi dimensioni non sono efficaci per la pubblicazione di contenuti animati rispetto ai video. Anziché il formato GIF potresti usare video MPEG4/WebM per le animazioni e PNG/WebP per le immagini statiche. In questo modo userai meno byte di rete.

Consulta l'articolo Sostituire le GIF animate con video per caricare le pagine più rapidamente per scoprire come sostituire le immagini GIF con i video.

Pubblica immagini con dimensioni adattabili

Idealmente, la pagina non dovrebbe mai pubblicare immagini più grandi della versione visualizzata sullo schermo dell'utente. Qualsiasi valore superiore comporta solo byte sprecati e rallenta il tempo di caricamento della pagina.

Una strategia consiste nell'utilizzare formati di immagine basati su vettori, come SVG. Con una quantità finita di codice, un'immagine SVG può essere scalata a qualsiasi dimensione. Per saperne di più, consulta Sostituire icone complesse con SVG.

Se le immagini basate su vettori non sono un'opzione, è meglio pubblicare immagini "responsive". Con le immagini adattabili, generi più versioni di ogni immagine e poi specifichi quale versione utilizzare nel codice HTML o CSS utilizzando query supporti, dimensioni dell'area visibile e così via.

Ad esempio, l'elemento <img> ha gli attributi srcset e sizes, che possono specificare gli URL delle immagini per diverse dimensioni:

Se devi cambiare completamente l'immagine, puoi utilizzare l'elemento &lt;picture>:

Per saperne di più, consulta Immagini adattabili e L'elemento picture.

Indicazioni specifiche per lo stack

Questo approfondimento offre anche indicazioni specifiche per gli stack per le pagine che utilizzano le seguenti tecnologie:

AMP

Drupal

  • Potresti usare un modulo che ottimizza e riduce automaticamente le dimensioni delle immagini caricate tramite il sito preservandone la qualità.
  • Assicurati di utilizzare gli stili di immagini adattabili integrati forniti da Drupal per tutte le immagini visualizzate sul sito.

Joomla

Valuta l'utilizzo di un plug-in o di un servizio che converta automaticamente le immagini caricate nei formati ottimali.

Magento

Valuta la possibilità di utilizzare un'estensione Magento di terze parti che ottimizza le immagini.

WordPress

Potresti usare un plug-in di WordPress per l'ottimizzazione delle immagini in grado di comprimere le tue immagini preservandone la qualità.

Risorse