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. La pagina ha sprecato molti dati mobili perché lo schermo non può fare nulla con quella 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">

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

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 Disabilita 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 precaricamento, le immagini iniziano a caricarsi al termine dell'esecuzione dello script da parte del browser. 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.

Precarica le immagini di sfondo utilizzando il set di immagini

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.

Riquadro Network (Rete) 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 CSS non è stato scaricato completamente, causando un ritardo non necessario nella 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 supportano imagesrcset nell'elemento <link>, ma supportano image-set nel CSS, scarichino la fonte corretta. Tuttavia, in questo caso non potranno usufruire del pre-caricamento.

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

Riquadro Network di Chrome DevTools che mostra una cascata con una risorsa JPEG che viene scaricata in modalità CSS. — Qui l'immagine e il file CSS inizieranno a essere scaricati contemporaneamente, consentendo un caricamento più rapido dell'immagine.

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).
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 del 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 sulla visualizzazione più grande con contenuti (LCP)

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

Indipendentemente dal fatto che l'immagine che stai precaricando sia reattiva, i precaricamenti funzionano al meglio quando la risorsa immagine non è rilevabile nel payload del markup iniziale. Inoltre, otterrai miglioramenti LCP maggiori sui siti che visualizzano il markup sul lato client rispetto a quelli che inviano il markup completo dal server.