I migliori suggerimenti per il rendimento sul Web

Usa srcset per scegliere automaticamente le dimensioni corrette delle immagini.

Sam Dutton

Secondo HTTP Archive, tipica pagina web mobile pesa più di 2,6 MB, che sono più di due terzi il peso è rappresentato dalle immagini. È un'ottima opportunità per l'ottimizzazione.

Riepilogo

• Non salvare immagini di dimensioni superiori a quelle di visualizzazione.
• Salva più dimensioni per ogni immagine e utilizza il metodo srcset per consentire al browser di scegliere il più piccolo. Il valore w indica al browser la larghezza di ogni versione:

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

Salvare immagini con le dimensioni corrette

Puoi velocizzare e ridurre il consumo di dati del tuo sito web utilizzando immagini con che corrispondono a quelle di visualizzazione. In altre parole, assegna alle immagini il giusto larghezza e altezza quando li salvi.

Dai un'occhiata alle immagini di seguito.

Sembrano quasi identici, ma la dimensione di uno è più di 10 volte più grande dell'altro.

La prima immagine ha dimensioni molto più grandi perché viene salvata con dimensioni molto più grande delle dimensioni del display. Entrambe le immagini vengono visualizzate con un 300 pixel di larghezza, quindi ha senso usare un'immagine salvata con dimensioni.

Per larghezze fisse, utilizza immagini salvate con le stesse dimensioni del dimensioni di visualizzazione.

Ma... cosa succede se le dimensioni del display variano?

In un mondo multi-dispositivo, le immagini non vengono sempre visualizzate in un'unica dimensione fissa.

Gli elementi immagine potrebbero avere una larghezza percentuale o far parte di layout adattabili dove le dimensioni di visualizzazione delle immagini cambiano per adattarsi a quelle dello schermo.

E i dispositivi che usano tanti pixel come i display Retina?

Aiuta il browser a scegliere le dimensioni giuste delle immagini

Non sarebbe fantastico se potessi rendere ogni immagine disponibile in dimensioni diverse? Consentire al browser di scegliere la dimensione migliore per il dispositivo e le dimensioni di visualizzazione? Purtroppo c'è catch-22 relativamente individuare l'immagine migliore. Il browser dovrebbe usare la dimensione minima possibile immagine, ma non può conoscerne la larghezza senza scaricarla per controllare.

È qui che entra in gioco srcset. Salvi immagini di dimensioni diverse, quindi indica al browser la larghezza di ogni versione:

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

I valori w mostrano la larghezza di ogni immagine in pixel. Ad esempio: small.jpg 500w indica al browser che small.jpg è 500 pixel di larghezza. In questo modo il browser potrà scegliere l'immagine più piccola possibile a seconda del tipo di schermo e delle dimensioni dell'area visibile, senza dover scaricare immagini per verificarne le dimensioni.

Puoi vedere srcset in azione per l'immagine di seguito. Se stai utilizzando un laptop o computer desktop, modifica le dimensioni della finestra del browser e riapri questa pagina. Quindi, utilizza il riquadro Rete degli strumenti del browser per verificare quale immagine è stata utilizzata. Dovrai farlo in una finestra di navigazione in incognito o in privato, altrimenti il il file immagine originale verrà memorizzato nella cache.

Come faccio a creare più dimensioni delle immagini?

Devi rendere disponibili più dimensioni per ogni immagine che vuoi utilizzare con srcset.

Per le immagini singole, come quelle hero, puoi salvare manualmente dimensioni diverse. Se se hai molte immagini, ad esempio le foto dei prodotti, dovrai automatizzare. Ci sono due approcci.

Incorpora l'elaborazione delle immagini nel processo di creazione

Come parte del processo di compilazione, puoi aggiungere passaggi per creare dimensioni diverse delle tue immagini. Consulta la sezione "Utilizzare Imagemin per comprimere le immagini". per saperne di più.

Utilizza un servizio immagini

La creazione e la pubblicazione delle immagini possono essere automatizzate utilizzando un servizio commerciale come Cloudinary o un equivalente open source come Thumbor che installi ed esegui autonomamente.

Carichi le immagini ad alta risoluzione e il servizio immagini automaticamente crea e pubblica immagini di formati e dimensioni diversi a seconda dell'URL parametri. Per un esempio, apri questa immagine di esempio su Cloudinary e prova a modificare il valore w o l'estensione del file nella barra dell'URL.

I servizi di immagini hanno anche funzionalità più avanzate, come la possibilità di automatizzare "ritaglio intelligente" per diverse dimensioni delle immagini e pubblicano automaticamente immagini WebP ai browser che supportano il formato, al posto dei file JPEG, senza modificare il file .

Cosa succede se l'immagine non viene visualizzata correttamente in dimensioni diverse?

In questo caso, devi utilizzare l'elemento <picture> per l'espressione "art director": fornendo un'immagine o un ritaglio di immagini differenti con dimensioni differenti. Per saperne di più dai un'occhiata al codelab "Direzione artistica".

E la densità dei pixel?

I dispositivi di fascia alta hanno pixel fisici più piccoli (più densi). Ad esempio, un di fascia alta potrebbe avere il doppio o il triplo dei pixel in ogni riga di Pixel come dispositivo più economico.

il che può influire sulle dimensioni necessarie per salvare le immagini. Non entriamo nel cruento qui, ma puoi trovare maggiori informazioni nel Codelab "Usa descrittori di densità".

E le dimensioni di visualizzazione dell'immagine?

Puoi utilizzare sizes per migliorare ulteriormente il funzionamento di srcset.

In caso contrario, il browser utilizza l'intera larghezza dell'area visibile quando sceglie immagine da un srcset. L'attributo sizes indica al browser la larghezza di un elemento immagine, in modo che il browser possa scegliere il più piccolo possibile prima di eseguire i calcoli di layout.

Nell'esempio seguente, sizes="50vw" indica al browser che l'immagine verrà visualizzato al 50% della larghezza dell'area visibile.

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

Puoi vedere come funziona all'indirizzo simpl.info/sizes e il codelab "Specifica di più larghezze dell'area".

E il supporto del browser?

srcset e sizes sono supportati da oltre il 90% di di Google Cloud in tutto il mondo.

Se un browser non supporta srcset o sizes, utilizzerà solo l'attributo src.

Questo rende srcset e sizes importanti miglioramenti progressivi.

Scopri di più

Consulta la sezione "Ottimizza le immagini". di web.dev per approfondire l'ottimizzazione delle immagini. Per una guida prova l'esperienza di prova del servizio " Immagini" offerto da Udacity.