Utilizza srcset per scegliere automaticamente le dimensioni corrette delle immagini.
Secondo HTTP Archive, una pagina web mobile tipica pesa più di 2, 6 MB e più di due terzi di questo peso sono immagini. È un'ottima opportunità per l'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 le immagini con le dimensioni corrette
Puoi rendere il tuo sito web più veloce e meno esigente in termini di dati utilizzando immagini con dimensioni corrispondenti alle dimensioni di visualizzazione. In altre parole, assegna alle immagini la larghezza e l'altezza corrette al momento del salvataggio.
Dai un'occhiata alle immagini di seguito.
Sembrano quasi identici, ma le dimensioni di uno sono più di 10 volte superiori rispetto all'altro.
La prima immagine ha dimensioni del file molto più grandi perché è salvata con dimensioni molto più grandi delle dimensioni del display. Entrambe le immagini vengono visualizzate con una larghezza fissa di 300 pixel, quindi ha senso utilizzare un'immagine salvata con le stesse dimensioni.
Per le larghezze fisse, utilizza immagini salvate con le stesse dimensioni delle dimensioni di visualizzazione.
Ma… che 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 in base alle dimensioni dello schermo.
…e che dire dei 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 dimensioni diverse e poi lasciare che sia il browser a scegliere le dimensioni migliori per il dispositivo e le dimensioni del display? Purtroppo, quando si tratta di capire quale immagine è la migliore, si finisce in un catch-22. 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 comunicate 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, in base al tipo di schermo e alle dimensioni della visualizzazione, 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 riquadro 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?
Dovrai 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 dei prodotti, dovrai automatizzare. Esistono due approcci.
Incorporare l'elaborazione delle immagini nel processo di compilazione
Durante la procedura di compilazione, puoi aggiungere passaggi per creare versioni di dimensioni diverse delle immagini. Per scoprire di più, consulta "Utilizzare Imagemin per comprimere le immagini".
Utilizzare un servizio di immagini
La creazione e l'importazione delle immagini possono essere automatizzate utilizzando un servizio commerciale come Cloudinary o un equivalente open source come Thumbor che puoi installare e gestire autonomamente.
Carichi le immagini ad alta risoluzione e il servizio di immagini le carica automaticamente e le pubblica in diversi formati e dimensioni, 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 offrono anche funzionalità più avanzate, come la possibilità di automatizzare il "ritaglio intelligente" per dimensioni diverse delle immagini e di pubblicare automaticamente immagini WebP nei browser che supportano il formato, anziché JPEG, senza modificare l'estensione del file.
Che cosa succede se l'immagine non ha un aspetto corretto a dimensioni diverse?
In questo caso, dovrai utilizzare l'elemento <picture> per l'"art direction":
fornendo un'immagine o un ritaglio dell'immagine diverso in dimensioni diverse. Per scoprire 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, un 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, ma puoi scoprire di più nel codelab "Utilizza i descrittori di densità".
E le dimensioni dell'immagine visualizzata?
Puoi utilizzare sizes per migliorare ulteriormente il funzionamento di srcset.
In caso contrario, il browser utilizza l'intera larghezza dell'area visibile quando si sceglie un'immagine da un srcset. L'attributo sizes indica al browser la larghezza in cui verrà visualizzato un elemento immagine, in modo che il browser possa scegliere il file immagine più piccolo possibile prima di eseguire calcoli di 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 un'applicazione pratica all'indirizzo simpl.info/sizes e nel codelab "Specificare più larghezze di slot".
Che ne è del supporto del browser?
srcset e sizes sono supportati da oltre il 90% dei browser a livello mondiale.
Se un browser non supporta srcset o sizes, verrà utilizzato solo l'attributo src.
srcset e sizes sono quindi ottimi miglioramenti progressivi.
Scopri di più
Dai un'occhiata alla sezione "Ottimizza le immagini" di web.dev per approfondire l'ottimizzazione delle immagini. Per un'esperienza più guidata, ti consigliamo di provare il corso senza costi "Immagini responsive" offerto da Udacity.