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
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
(oCommand+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.
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.
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.
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.
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.
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.