Utilizza srcset per scegliere automaticamente la dimensione corretta dell'immagine.
Secondo HTTP Archive, una tipica pagina web mobile pesa oltre 2, 6 MB e più di due terzi di questo peso sono immagini. È un'ottima opportunità di ottimizzazione.
Riepilogo
- Non salvare immagini più grandi delle dimensioni di visualizzazione.
- Salva più dimensioni per ogni immagine e utilizza l'attributo
srcsetper consentire al browser di scegliere la più piccola. Il valorewindica 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 giuste
Puoi rendere il tuo sito web più veloce e meno avido di dati utilizzando immagini con dimensioni corrispondenti a quelle del display. In altre parole, assegna alle immagini la larghezza e l'altezza corrette quando le salvi.
Dai un'occhiata alle immagini di seguito.
Sembrano quasi identici, ma le dimensioni di un file sono più di 10 volte superiori rispetto all'altro.
La prima immagine ha dimensioni del file molto maggiori perché è salvata con dimensioni molto più grandi delle dimensioni di visualizzazione. Entrambe le immagini vengono visualizzate con una larghezza fissa di 300 pixel, quindi è consigliabile utilizzare un'immagine salvata con le stesse dimensioni.
Per le larghezze fisse, utilizza immagini salvate con le stesse dimensioni della dimensione di visualizzazione.
Ma… cosa succede se le dimensioni del display variano?
In un mondo multi-dispositivo, le immagini non vengono sempre visualizzate con una singola dimensione fissa.
Gli elementi immagine potrebbero avere una larghezza percentuale o far parte di layout adattabili in cui le dimensioni di visualizzazione delle immagini cambiano per adattarsi alle dimensioni dello schermo.
…e per quanto riguarda i dispositivi che richiedono molti pixel, come i display Retina?
Aiutare il browser a scegliere le dimensioni dell'immagine giuste
Non sarebbe fantastico se potessi rendere disponibile ogni immagine in diverse dimensioni e poi lasciare che il browser scelga la dimensione migliore per il dispositivo e le dimensioni del display? Purtroppo c'è un catch-22 quando si tratta di capire quale immagine è la migliore. Il browser dovrebbe utilizzare l'immagine più piccola possibile, ma non può conoscere la larghezza di un'immagine senza scaricarla per verificarla.
È qui che srcset torna utile. Salva le immagini in dimensioni diverse, poi
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 ha una larghezza di 500
pixel. In questo modo, il browser può scegliere l'immagine più piccola possibile,
a seconda del tipo di schermo e delle dimensioni della finestra visualizzata, senza dover scaricare le immagini per verificarne le dimensioni.
Puoi vedere srcset in azione nell'immagine di seguito. Se utilizzi un laptop o
un computer, modifica le dimensioni della finestra del browser e riapri questa pagina.
Quindi, utilizza il pannello Rete degli strumenti del browser per controllare quale immagine è stata utilizzata.
Dovrai farlo in una finestra di navigazione in incognito o privata, altrimenti 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 una tantum, come le immagini hero, puoi salvare manualmente dimensioni diverse. Se hai molte immagini, ad esempio foto di prodotti, dovrai automatizzare la procedura. A questo scopo, esistono due approcci.
Incorporare l'elaborazione delle immagini nel processo di compilazione
Nell'ambito della procedura di compilazione, puoi aggiungere passaggi per creare versioni delle immagini di dimensioni diverse. Per saperne di più, consulta la sezione "Utilizzare Imagemin per comprimere le immagini".
Utilizzare un servizio di 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 di immagini crea e distribuisce automaticamente
diversi formati e dimensioni delle immagini a seconda dei parametri dell'URL. Ad esempio, apri questa immagine di esempio su Cloudinary e prova a modificare il valore w o l'estensione del file nella barra degli URL.
I servizi di immagini dispongono anche di funzionalità più avanzate, come la possibilità di automatizzare il "ritaglio intelligente" per diverse dimensioni delle immagini e di pubblicare automaticamente immagini WebP nei browser che supportano il formato, anziché JPEG, senza modificare l'estensione del file.
Cosa succede se l'immagine non ha un aspetto corretto a dimensioni diverse?
In questo caso, devi utilizzare l'elemento <picture> per la "direzione artistica":
fornire un'immagine o un ritaglio dell'immagine diversi a dimensioni diverse. Per saperne di più,
consulta il codelab "Art direction".
E la densità di pixel?
I dispositivi di fascia alta hanno pixel fisici più piccoli (più densi). Ad esempio, uno smartphone di fascia alta potrebbe avere il doppio o il triplo dei pixel in ogni riga di pixel rispetto a un dispositivo più economico.
Ciò può influire sulle dimensioni necessarie per salvare le immagini. Non entreremo nei dettagli qui, ma puoi scoprire di più nel codelab "Utilizza i descrittori di densità".
Che dire delle dimensioni di visualizzazione dell'immagine?
Puoi utilizzare sizes per migliorare ulteriormente il funzionamento di srcset.
Senza, il browser utilizza l'intera larghezza della finestra quando sceglie un'immagine da un srcset. L'attributo sizes indica al browser la larghezza con cui verrà visualizzato un elemento immagine, in modo che il browser possa scegliere il file immagine più piccolo possibile prima di eseguire qualsiasi calcolo del layout.
Nell'esempio seguente, sizes="50vw" indica al browser che questa immagine verrà
visualizzata 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 questo in azione all'indirizzo simpl.info/sizes e nel codelab "Specifying multiple slot widths".
Che dire del supporto del browser?
srcset e sizes sono supportati da oltre il 90% dei browser a livello globale.
Se un browser non supporta srcset o sizes, verrà utilizzato solo l'attributo src.
Ciò rende srcset e sizes ottimi miglioramenti progressivi.
Scopri di più
Per approfondire l'ottimizzazione delle immagini, consulta la sezione "Ottimizzare le immagini" di web.dev. Per un'esperienza più guidata, valuta la possibilità di provare il corso senza costi "Immagini responsive" offerto da Udacity.