Usa srcset per scegliere automaticamente le dimensioni dell'immagine corrette.
Secondo HTTP Archive, una tipica pagina web mobile pesa più di 2,6 MB, di cui più di due terzi sono le immagini. È una grande opportunità di ottimizzazione.
Riepilogo
- Non salvare immagini di dimensioni superiori a quelle dello schermo.
- Salvare più dimensioni per ogni immagine e utilizzare l'attributo
srcsetper consentire al browser di scegliere la dimensione 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="…">
Salva immagini con le dimensioni corrette
Puoi rendere il tuo sito web più veloce e con meno dati utilizzando immagini con dimensioni corrispondenti a quelle del display. In altre parole, salva le immagini con la giusta larghezza e altezza.
Dai un'occhiata alle immagini di seguito.
Sembrano quasi identici, ma le dimensioni dei file di uno sono più di 10 volte più grandi dell'altro.
La prima immagine ha dimensioni di file molto più grandi perché viene salvata con dimensioni molto più grandi di quelle di visualizzazione. Entrambe le immagini vengono visualizzate con una larghezza fissa di 300 pixel, quindi ha senso utilizzare un'immagine salvata delle stesse dimensioni.
Per larghezze fisse, utilizza immagini salvate con le stesse dimensioni delle dimensioni di visualizzazione.
Ma... cosa succede se le dimensioni del display cambiano?
In un mondo multi-dispositivo, non sempre le immagini vengono visualizzate con un'unica 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 i dispositivi che consumano molta pixel come i display Retina?
Aiutare il browser a scegliere le dimensioni corrette delle immagini
Non sarebbe bello poter rendere disponibile ogni immagine in dimensioni diverse e consentire al browser di scegliere la dimensione migliore per il dispositivo e le dimensioni del display? Purtroppo c'è un catch-22 quando si tratta di capire qual è l'immagine migliore. Il browser dovrebbe utilizzare l'immagine più piccola possibile, ma non può conoscere la larghezza di un'immagine senza scaricarla per controllarla.
È qui che può tornare utile srcset. Salva le 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 ha una larghezza di
500 pixel. Ciò consente al browser di 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 utilizzi un laptop o un computer, modifica le dimensioni della finestra
del browser e riapri la pagina.
Poi utilizza il riquadro Network degli strumenti del browser per verificare quale immagine è stata utilizzata.
(devi eseguire questa operazione in una finestra di navigazione in incognito o privata, altrimenti il
file dell'immagine originale verrà memorizzato nella cache).
Come faccio a creare più dimensioni di immagine?
Dovrai rendere disponibili più dimensioni per ogni immagine che vuoi utilizzare
con srcset.
Per le immagini una tantum, come quelle hero, puoi salvare manualmente dimensioni diverse. Se hai tante immagini, ad esempio foto dei prodotti, dovrai automatizzare le operazioni. Per questo ci sono due approcci.
Incorpora l'elaborazione delle immagini nel processo di creazione
Come parte del processo di compilazione, puoi aggiungere passaggi per creare versioni delle immagini di dimensioni diverse. Per scoprire di più, consulta la sezione "Utilizzare Imagemin per comprimere le immagini".
Utilizzare un servizio immagini
La creazione e la distribuzione delle immagini possono essere automatizzate utilizzando un servizio commerciale come Cloudinary o un equivalente open source come Thumbor che installi ed esegui in autonomia.
Quando carichi le immagini ad alta risoluzione, il servizio immagini crea e pubblica automaticamente formati e dimensioni delle immagini diversi a seconda dei parametri 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 immagine hanno inoltre funzionalità più avanzate, come la possibilità di automatizzare il "ritaglio intelligente" per diverse dimensioni delle immagini e distribuire automaticamente immagini WebP ai browser che supportano il formato, anziché JPEG, senza modificare l'estensione del file.
Che cosa succede se l'immagine non viene visualizzata correttamente in dimensioni diverse?
In questo caso, devi utilizzare l'elemento <picture> per "art director", ovvero fornire un'immagine o un ritaglio diverso con dimensioni diverse. Per scoprire di più,
dai un'occhiata al codelab "Art director".
E la densità dei pixel?
I dispositivi di fascia alta hanno pixel fisici più piccoli (più densi). Ad esempio, un telefono di fascia alta potrebbe avere il doppio o il triplo di pixel in ogni riga di 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 "Usa descrittori di densità".
Quali sono 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 un'immagine da un elemento srcset. L'attributo sizes indica al browser la larghezza di visualizzazione di 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 riportato di seguito, 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 vederla in azione su simpl.info/sizes e nel codelab "Specificare più larghezze degli slot".
E il supporto dei browser?
srcset e sizes sono supportati da oltre il 90% dei browser a livello globale.
Se un browser non supporta srcset o sizes, ricorrerà solo all'utilizzo dell'attributo src.
In questo modo srcset e sizes sono ottimi miglioramenti progressivi.
Scopri di più
Consulta la sezione "Ottimizza le tue immagini" di web.dev per un approfondimento sull'ottimizzazione delle immagini. Per un'esperienza più guidata, valuta la possibilità di provare il corso senza costi "Adaptive Images" offerto da Udacity.