Questa pagina è stata tradotta dall'API Cloud Translation.

Precarica le immagini adattabili

Barry Pollard

Yoav Weiss

Puoi precaricare le immagini responsive, che possono consentire il caricamento delle immagini 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

Supporto dei browser

Supponiamo che tu stia navigando sul web su uno schermo largo 300 pixel e che la pagina richiede un'immagine larga 1500 pixel. Questa pagina ha sprecato molti dei tuoi dati su dispositivi mobili perché lo schermo non può fare nulla con tutta questa risoluzione extra. Idealmente, il browser recupererebbe una versione dell'immagine leggermente più ampia rispetto alle dimensioni dello schermo, ad esempio 325 pixel. In questo modo, viene garantita un'immagine ad alta risoluzione senza sprecare dati e il caricamento dell'immagine è più rapido.

Le immagini responsive consentono ai browser di recuperare risorse immagine diverse per dispositivi diversi. Se non utilizzi un CDN di 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 del precaricamento

Supporto dei browser

Origine

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 che non sono 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">

`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 di 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">

A tale scopo, aggiungi quanto segue al <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 iniettate dinamicamente

Immagina di caricare dinamicamente le immagini hero all'interno di una presentazione e di sapere quale immagine verrà visualizzata per prima. In questo caso, ti consigliamo di mostrare l'immagine il prima possibile e di non attendere il caricamento dello script della presentazione.

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

Apri questa demo di presentazione 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 Ritardo, seleziona 3G veloce.
Disattiva la casella di controllo Disattiva cache.
Ricarica la pagina.

Pannello della rete di Chrome DevTools che mostra una struttura a cascata con una risorsa JPEG che inizia a essere scaricata solo dopo alcuni script JavaScript. — Senza il precaricamento, le immagini iniziano a caricarsi dopo che il browser ha terminato di eseguire lo script. Per la prima immagine, questo ritardo non è necessario.

L'utilizzo di preload qui consente di avviare il caricamento dell'immagine in anticipo, in modo che sia pronta per la visualizzazione quando il browser deve mostrarla.

Riquadro della rete di Chrome DevTools che mostra una sequenza con il download di una risorsa JPEG in parallelo ad alcuni script JavaScript. — Il precaricamento della prima immagine consente di avviarne il caricamento contemporaneamente allo script.

Per vedere la differenza che fa il precaricamento, controlla 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.

Pannello Rete di Chrome DevTools che mostra una visualizzazione a 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 ti consente di caricarle più velocemente.

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

Se non specifichi l'attributo href, puoi assicurarti che i browser che non supportano imagesrcset nell'elemento <link>, ma supportano image-set nel CSS, scarichino la fonte corretta. Tuttavia, in questo caso non potranno usufruire del precaricamento.

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

Riquadro Rete di Chrome DevTools che mostra una struttura a cascata con il download di una risorsa JPEG in parallelo ad alcuni CSS. — In questo caso, l'immagine e il CSS iniziano a essere scaricati contemporaneamente, il che consente di caricare l'immagine più velocemente.

Effetti pratici del precaricamento delle immagini adattabili

Il precaricamento delle immagini adattabili può velocizzarle in teoria, ma cosa fa praticamente?

Per rispondere a questa domanda, ho creato due copie di un negozio demo PWA: una che non precarica le immagini, e un'altra che ne precarica alcune. Poiché il sito carica le immagini utilizzando il caricamento lento tramite JavaScript, è probabile che tragga vantaggio dal precaricamento di quelle visualizzate nell'area visibile iniziale.

I risultati sono stati i seguenti per nessun precaricamento e per il precaricamento delle immagini:

L'opzione Avvia rendering rimane invariata.
L'indice di velocità è leggermente migliorato (273 ms, poiché le immagini arrivano più velocemente e non occupano una grande parte dell'area dei pixel).
Il valore Last Painted Hero è migliorato in modo significativo, di 1,2 secondi.

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

Precarica e `<picture>`

Il gruppo di lavoro Web Performance 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 "art direction".

Esistono ancora una serie di problemi tecnici da risolvere per il precaricamento <picture>, ma nel frattempo esistono delle 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> esamina in ordine gli attributi media degli elementi <source>, trova il primo corrispondente e utilizza la risorsa allegata.

Poiché il precaricamento adattabile non ha il concetto di "ordine" o "prima corrispondenza", dovrai tradurre i punti di interruzione in qualcosa di simile al seguente:

<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 di fornire diversi formati di immagine in modo che il browser possa scegliere il primo formato supportato. Questo caso d'uso non è supportato con il precaricamento.

Per i siti che utilizzano la corrispondenza del tipo, ti consigliamo di evitare il precaricamento e di lasciare che sia il scanner di precaricamento a rilevare le immagini dagli elementi <picture> e <source>. Si tratta comunque di una best practice, soprattutto se utilizzi Priorità recupero per dare la priorità all'immagine appropriata.

Effetti su Largest Contentful Paint (LCP)

Poiché le immagini possono essere candidate a Largest Contentful Paint (LCP), precaricarle può migliorare il LCP del tuo sito web.

Indipendentemente dal fatto che l'immagine che stai precaricando sia adattabile, il precaricamento funziona meglio quando la risorsa immagine non è rilevabile nel payload del markup iniziale. Inoltre, otterrai un miglioramento maggiore dell'LCP sui siti che eseguono il rendering del markup lato client rispetto ai siti che inviano markup completo dal server.