Precarica le immagini adattabili

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Pubblicato il 30 settembre 2019, ultimo aggiornamento il 10 luglio 2026

Puoi precaricare le immagini adattabili, il che può velocizzare notevolmente il caricamento delle immagini aiutando il browser a identificare l'immagine corretta da un srcset prima di eseguire il rendering del tag img.

Panoramica sulle immagini adattabili

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

Supponiamo che tu stia navigando sul web su uno schermo largo 300 pixel e che la pagina richieda un'immagine larga 1500 pixel. Questa pagina ha sprecato molti dati mobile perché lo schermo non può fare nulla con tutta quella risoluzione extra. Idealmente, il browser recupererebbe una versione dell'immagine leggermente più larga delle dimensioni dello schermo, ad esempio 325 pixel. In questo modo, l'immagine è ad alta risoluzione senza sprecare dati e si carica più velocemente.

Le immagini adattabili consentono ai browser di recuperare risorse immagine diverse per dispositivi diversi. Se non utilizzi una CDN per le immagini, salva più dimensioni per ogni immagine e specificale nell'attributo srcset. Il valore w indica al browser la larghezza di ogni versione, in modo che possa scegliere la versione appropriata per qualsiasi dispositivo:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Panoramica sul precaricamento

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

Il precaricamento ti consente di indicare al browser le risorse fondamentali che vuoi caricare il prima possibile, prima che vengano rilevate in HTML. Ciò è particolarmente utile per le risorse non facilmente rilevabili, come i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset e imagesizes

L'elemento <link> utilizza gli attributi imagesrcset e imagesizes per precaricare le immagini adattabili. Utilizzali insieme a <link rel="preload">, con la sintassi srcset e sizes utilizzata nell'elemento <img>.

Ad esempio, se vuoi precaricare un'immagine adattabile specificata con:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Puoi farlo aggiungendo quanto segue all'elemento <head> del codice HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

In questo modo viene avviata una richiesta utilizzando la stessa logica di selezione delle risorse utilizzata da srcset e sizes.

Casi d'uso

Di seguito sono riportati alcuni casi d'uso per il precaricamento delle immagini adattabili.

Precaricare le immagini adattabili inserite dinamicamente

Immagina di caricare dinamicamente le immagini hero come parte di uno slideshow e di sapere quale immagine verrà visualizzata per prima. In questo caso, probabilmente vuoi mostrare l'immagine il prima possibile e non attendere che lo script dello slideshow la carichi.

Puoi esaminare questo problema su un sito web con una galleria di immagini caricate dinamicamente:

  1. Apri questa demo di slideshow in una nuova scheda.
  2. Premi Control+Shift+J (o Command+Option+J su Mac) per aprire Chrome DevTools.
  3. Fai clic sulla scheda Rete.
  4. Nell'elenco a discesa Limitazione, seleziona Fast 3G.
  5. Disattiva la casella di controllo Disattiva cache.
  6. Ricarica la pagina.
Il riquadro Rete di Chrome DevTools che mostra una cascata con una risorsa JPEG che inizia a essere scaricata solo dopo JavaScript.
Senza il precaricamento, le immagini iniziano a caricarsi dopo che il browser ha terminato l'esecuzione dello script. Per la prima immagine, questo ritardo non è necessario.

L'utilizzo di preload qui consente all'immagine di iniziare a caricarsi in anticipo, in modo che possa essere pronta per la visualizzazione quando il browser deve visualizzarla.

Il riquadro Rete di Chrome DevTools che mostra una cascata con una risorsa JPEG scaricata in parallelo con JavaScript.
Il precaricamento della prima immagine consente di iniziare a caricarla contemporaneamente allo script.

Per vedere la differenza che fa il precaricamento, esamina la stessa galleria di immagini caricate dinamicamente , ma con la prima immagine precaricata seguendo i passaggi del primo esempio.

Precaricare le immagini di sfondo utilizzando image-set

Se hai immagini di sfondo diverse per densità dello schermo diverse, puoi specificarle nel CSS con la sintassi image-set. Il browser può quindi scegliere quale visualizzare in base al DPR dello schermo DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Il problema con le immagini di sfondo CSS è che il browser le rileva solo dopo aver scaricato ed elaborato tutto il CSS nell'elemento <head> della pagina.

Puoi esaminare questo problema su un sito web di esempio con un' immagine di sfondo adattabile.

Il riquadro Rete di Chrome DevTools che mostra una cascata con una risorsa JPEG che inizia a essere scaricata solo dopo alcuni CSS.
In questo esempio, il download dell'immagine non inizia finché il CSS non viene scaricato completamente, causando un ritardo non necessario nella visualizzazione dell'immagine.

Il precaricamento delle immagini adattabili consente di caricare queste immagini più velocemente.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

Se ometti l'attributo href, puoi assicurarti che i browser che non supportano imagesrcset nell'elemento <link>, ma supportano image-set in CSS, scarichino l'origine corretta. Tuttavia, in questo caso non usufruiranno del precaricamento.

Puoi esaminare il comportamento dell'esempio precedente con un'immagine di sfondo adattabile precaricata nella demo di precaricamento dello sfondo adattabile.

Il riquadro Rete di Chrome DevTools che mostra una cascata con una risorsa JPEG scaricata in parallelo ad alcuni CSS.
In questo caso, l'immagine e il CSS iniziano a scaricarsi contemporaneamente, consentendo all'immagine di caricarsi più velocemente.

Effetti pratici del precaricamento delle immagini adattabili

In teoria, il precaricamento delle immagini adattabili può velocizzarle, ma cosa succede in pratica?

Per rispondere a questa domanda, ho creato due copie di un negozio PWA demo: una che non precarica le immagini, e una che ne precarica alcune. Poiché il sito carica le immagini in modo lento utilizzando JavaScript, è probabile che il precaricamento di quelle che appaiono nella visualizzazione iniziale sia utile.

Sono stati ottenuti i seguenti risultati per nessun precaricamento e per il precaricamento delle immagini:

Confronto della striscia di pellicola di WebPageTest che mostra che le immagini precaricate vengono visualizzate circa 1,5 secondi più velocemente.
Le immagini arrivano molto più velocemente quando vengono precaricate, migliorando notevolmente l'esperienza utente.

Precaricamento e <picture>

Il gruppo di lavoro sulle prestazioni web sta discutendo l'aggiunta di un equivalente di precaricamento per srcset e sizes, ma non per l'elemento <picture>, che gestisce il caso d'uso della "direzione artistica".

Esistono ancora una serie di problemi tecnici da risolvere per il precaricamento di <picture>, ma nel frattempo esistono soluzioni alternative:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

La logica di selezione dell'origine immagine dell'elemento <picture> esamina gli attributi media degli elementi <source> in ordine, trova il primo che corrisponde e utilizza la risorsa allegata.

Poiché il precaricamento adattabile non ha nozioni di "ordine" o "prima corrispondenza", dovrai tradurre i punti di interruzione in qualcosa di simile a quanto segue:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Precaricamento e type

L'elemento <picture> supporta anche la corrispondenza con il primo type, per consentirti di fornire formati immagine diversi in modo che il browser possa scegliere il primo formato immagine supportato.

Questo caso d'uso è supportato solo parzialmente con il precaricamento: i browser devono scaricare solo i precaricamenti per i tipi supportati. Pertanto, puoi utilizzare questa opzione per impedire ai browser di precaricare i tipi di tipi MIME non supportati includendoli nel precaricamento:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Tuttavia, a differenza di <picture> non si fermerà al primo tipo supportato. Pertanto, se sono inclusi più precaricamenti per più tipi, tutte le immagini verranno precaricate:

Non eseguire questa operazione: precaricare più tipi:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Esegui invece questa operazione: precarica il tipo preferito:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Il precaricamento del formato più recente (in questo caso AVIF) funge da potenziamento progressivo, in cui i browser che supportano questo tipo ne trarranno vantaggio, mentre gli altri browser non trarranno vantaggio dal precaricamento.

Per i siti in cui l'immagine è facilmente rilevabile nel codice HTML, ti consigliamo di evitare il precaricamento e di fare in modo che lo scanner di precaricamento recuperi le immagini dagli elementi <picture> e <source> invece. Questa è comunque una best practice, soprattutto quando si utilizza Fetch Priority per dare la priorità all'immagine appropriata, in quanto consente di precaricare l'immagine esatta in base al supporto del browser. Inoltre, elimina il rischio che un precaricamento diventi obsoleto dal markup principale quando le immagini o le pagine cambiano.

Effetti su Largest Contentful Paint (LCP)

Poiché le immagini possono essere candidate per Largest Contentful Paint (LCP), il loro precaricamento può migliorare l'LCP del tuo sito web.

Indipendentemente dal fatto che l'immagine che stai precaricando sia adattabile o meno, i precaricamenti funzionano meglio quando la risorsa immagine non è rilevabile nel payload del markup iniziale. Otterrai anche un miglioramento maggiore dell'LCP sui siti che eseguono il rendering del markup sul lato client rispetto ai siti che inviano il markup completo dal server.