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 le immagini con dimensioni maggiori rispetto a quelle 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 i dispositivi che usano tanti 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 dilemma. 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. Quando salvi immagini di dimensioni diverse, 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 è largo 500
pixel. In questo modo, il browser può scegliere l'immagine più piccola possibile, a seconda del tipo di schermo e delle dimensioni dell'area visibile, 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?
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 dei prodotti, dovrai automatizzare. Esistono due approcci.
Incorporare l'elaborazione delle immagini nel processo di compilazione
Come parte del processo 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 il caricamento delle immagini possono essere automatizzati 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. 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 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ù,
dai un'occhiata al codelab "Direzione artistica".
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 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 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, 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 saperne di più sull'ottimizzazione delle immagini. Per un'esperienza più guidata, valuta la possibilità di provare il corso senza costi "Adaptive Images" offerto da Udacity.