Questa pagina è stata tradotta dall'API Cloud Translation.

Precarica le immagini adattabili

Barry Pollard

Yoav Weiss

Puoi precaricare le immagini adattabili, che possono consentirne il caricamento molto più velocemente, aiutando il browser a identificare l'immagine corretta da un srcset prima di visualizzare il tag img.

Panoramica delle immagini adattabili

Supporto dei browser

Supponiamo che tu stia navigando sul web su uno schermo di 300 pixel di larghezza e che la pagina richiede un'immagine larga 1500 pixel. La pagina ha sprecato gran parte del tuo traffico perché lo schermo non può fare nulla con quella risoluzione extra. Idealmente, il browser dovrebbe recuperare una versione dell'immagine piccola rispetto a quelle dello schermo, ad esempio 325 pixel. Ciò garantisce un'immagine ad alta risoluzione senza sprecare dati e consente il caricamento dell'immagine più velocemente.

Immagini adattabili consente ai browser di recuperare risorse di immagini diverse per dispositivi diversi. In caso contrario Utilizza una CDN di immagini, salva più dimensioni per ogni immagine e specificale nell'attributo srcset. Il valore w indica browser la larghezza di ogni versione, in modo che possa scegliere la versione più adatta su qualsiasi dispositivo:

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

Panoramica del precaricamento

Supporto dei browser

Origine

Il precaricamento ti consente di comunicare al browser e risorse critiche da caricare il prima possibile, prima individuati in HTML. Ciò è particolarmente utile per le risorse che non sono immediatamente rilevabili, come i caratteri inclusi nei fogli di stile, nelle immagini di sfondo o di 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 vengono precaricate immagini adattabili. Usali insieme <link rel="preload">, con la sintassi srcset e sizes utilizzata in 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 al <head> del tuo 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">

Questo avvia una richiesta utilizzando la stessa logica di selezione delle risorse Utilizzo di srcset e sizes.

Casi d'uso

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

Precarica le immagini adattabili inserite dinamicamente

Immagina di caricare dinamicamente le immagini hero come parte di una presentazione e quale immagine verrà visualizzata per prima. In questo caso, probabilmente vorrai mostrare l'immagine il prima possibile e non attendere che lo script della presentazione per caricarlo.

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

Apri questa demo di Presentazioni in una nuova scheda.
Premi Control+Shift+J (o Command+Option+J su Mac) per aprire DevTools.
Fai clic sulla scheda Rete.
Nell'elenco a discesa Limitazione, seleziona 3G rapido.
Disattiva la casella di controllo Disabilita cache.
Ricarica la pagina.

di Gemini Advanced.

Riquadro Network di Chrome DevTools che mostra una struttura a cascata con una risorsa JPEG che inizia il download solo dopo un po' di JavaScript. — Senza precaricamento, le immagini iniziano a caricarsi al termine dell'esecuzione dello script da parte del browser. Per la prima immagine, quel ritardo non è necessario.

L'utilizzo di preload qui consente all'immagine di iniziare il caricamento in anticipo, quindi può essere pronto per essere visualizzato quando il browser deve mostrarlo.

Riquadro Network di Chrome DevTools che mostra una struttura a cascata con una risorsa JPEG che viene scaricata in parallelo a codice JavaScript. — Il precaricamento della prima immagine ne consente l'avvio contemporaneamente allo script.

Per vedere la differenza che fa il precaricamento, esamina lo stesso modello galleria immagini, ma con la prima immagine precaricata seguendo i passaggi del primo esempio.

Precarica le immagini di sfondo utilizzando il set di immagini

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

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

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

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

Riquadro Network di Chrome DevTools che mostra una struttura a cascata con una risorsa JPEG che inizia il download solo dopo un po' di CSS. — In questo esempio, il download dell'immagine non inizia finché il file CSS non è stato scaricato completamente, causando ritardi non necessari per la visualizzazione dell'immagine.

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

<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 lo supportano imagesrcset per l'elemento <link>, ma supportano image-set in CSS scarica l'origine corretta. Tuttavia, il precaricamento non è disponibile in questo caso.

Puoi controllare il comportamento dell'esempio precedente con un'immagine adattabile precaricata Immagine di sfondo nella demo adattabile di precaricamento in background.

Riquadro Network di Chrome DevTools che mostra una cascata con una risorsa JPEG che viene scaricata in modalità CSS. — Qui l'immagine e il codice CSS iniziano contemporaneamente al download, in modo che l'immagine venga caricata più velocemente.

Effetti pratici del precaricamento di immagini adattabili

Il precaricamento delle immagini adattabili in teoria può velocizzarlo, ma cosa consente fare in pratica?

Per rispondere che ho creato due copie di un negozio PWA demo: che non precarica le immagini, e uno che ne precarica alcuni. Poiché il sito esegue il caricamento lento delle immagini utilizzando JavaScript, potrebbe essere utile durante il precaricamento di quelle mostrate nell'area visibile iniziale.

Questo ha prodotto i seguenti risultati per senza precaricamento e per il precaricamento delle immagini:

Avvia rendering è rimasto invariato.
Indice di velocità leggermente migliorata (273 ms, quando le immagini arrivano più velocemente non occupano una porzione enorme dell'area pixel).
Ultimo eroe dipinto è migliorato in modo significativo di 1, 2 secondi.

di Gemini Advanced.

Il confronto della sequenza di pellicola WebPageTest che mostra 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 Web Performance Working Group sta discutendo dell'aggiunta di un equivalente di precaricamento per srcset e sizes, ma non <picture> che gestisce la "direzione artistica" caso d'uso.

Esistono ancora diversi problemi tecnici da risolvere per il precaricamento di <picture>. ma nel frattempo puoi trovare alcune 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 dell'immagine dell'elemento <picture> supera media attributi degli elementi <source> in ordine, trova il primo che corrisponde a e utilizza la risorsa collegata.

Poiché il precaricamento adattabile non ha alcuna nozione di "ordine" o "prima corrispondenza", devi tradurre i punti di interruzione in qualcosa di simile a questo:

<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 sul primo type, per consentirti Fornire formati di immagine diversi in modo che il browser possa scegliere il primo formato dell'immagine che supporta. Questo caso d'uso non è supportato con il precaricamento.

Per i siti che utilizzano la corrispondenza del tipo, consigliamo di evitare il precaricamento e, invece, lo scanner di precaricamento acquisisce le immagini dalla <picture> e <source>. Questa è comunque una best practice, soprattutto quando si utilizza Priorità di recupero, per avere assistenza nell'assegnazione delle priorità l'immagine appropriata.

Effetti sulla visualizzazione più grande con contenuti (LCP)

Poiché le immagini possono essere candidate per l'opzione 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 reattiva, i precaricamenti funzionano la soluzione migliore se la risorsa immagine non è rilevabile nel payload di markup iniziale. Inoltre, otterrai maggiori miglioramenti LCP per i siti che visualizzano il markup sul client rispetto ai siti che inviano il markup completo dal server.