Precarica le immagini adattabili

Puoi precaricare le immagini adattabili, che possono essere caricate molto più velocemente aiutando il browser a identificare l'immagine corretta da un srcset prima di eseguire il rendering del tag img.

Panoramica delle 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 mobili perché lo schermo non può fare nulla con tutta quella risoluzione aggiuntiva. Idealmente, il browser recupera una versione dell'immagine leggermente più larga delle dimensioni dello schermo, ad esempio 325 pixel. In questo modo si garantisce un'immagine ad alta risoluzione senza sprecare dati e l'immagine viene caricata più rapidamente.

Le immagini adattabili consentono ai browser di recuperare risorse di immagini 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 quella appropriata per qualsiasi dispositivo:

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

Panoramica del 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 nel codice HTML. Ciò è particolarmente utile per le risorse non facilmente individuabili, 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">

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 responsive 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">

Per farlo, aggiungi quanto segue a <head> dell'HTML:

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

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 una presentazione e di sapere quale immagine verrà visualizzata per prima. In questo caso, probabilmente vuoi mostrare l'immagine il prima possibile e non aspettare che lo script della presentazione la carichi.

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

  1. Apri questa demo della presentazione 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 3G veloce.
  5. Deseleziona la casella di controllo Disattiva cache.
  6. Ricarica la pagina.
Il pannello Rete di Chrome DevTools 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 di iniziare a caricare l'immagine in anticipo, in modo che possa essere pronta per la visualizzazione quando il browser deve mostrarla.

Il riquadro Rete di Chrome DevTools mostra una cascata con una risorsa JPEG scaricata in parallelo a JavaScript.
Il precaricamento della prima immagine consente di avviarne il caricamento contemporaneamente a quello dello script.

Per vedere la differenza che fa il precaricamento, esamina la stessa galleria di immagini caricata 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.

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 nel <head> della pagina.

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

Il pannello Rete di Chrome DevTools 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 è stato scaricato completamente, causando un ritardo non necessario nella visualizzazione dell'immagine.

Il precaricamento delle immagini adattabili consente di caricarle più rapidamente.

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

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

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

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

Effetti pratici del precaricamento delle immagini adattabili

Il precaricamento delle immagini adattabili può velocizzarle in teoria, ma cosa fa 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 differito utilizzando JavaScript, è probabile che tragga vantaggio dal precaricamento di quelle che appaiono nella visualizzazione iniziale.

che ha prodotto i seguenti risultati per nessun precaricamento e per il precaricamento delle immagini:

  • Avvio rendering è rimasto invariato.
  • Indice di velocità leggermente migliorato (273 ms, poiché le immagini arrivano più velocemente e non occupano una parte enorme dell'area dei pixel).
  • Last Painted Hero è migliorato in modo significativo, di 1,2 secondi.
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.

Precarica 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 reattivo non ha nozioni di "ordine" o "prima corrispondenza", devi tradurre i breakpoint in qualcosa di simile a quanto segue:

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

Precarica e type

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

Per i siti che utilizzano la corrispondenza dei tipi, ti consigliamo di evitare il precaricamento e di far sì che lo scanner di precaricamento recuperi le immagini dagli elementi <picture> e <source>. Si tratta comunque di una best practice, soprattutto quando utilizzi Priorità di recupero per dare la priorità all'immagine appropriata.

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 precarichi sia reattiva, i precaricamenti funzionano meglio quando la risorsa immagine non è rilevabile nel payload di markup iniziale. Inoltre, otterrai un miglioramento maggiore dell'LCP sui siti che eseguono il rendering del markup lato client rispetto ai siti che inviano il markup completo dal server.