La pubblicazione di immagini per computer su dispositivi mobili può utilizzare 2-4 volte più dati del necessario. Segui le linee guida riportate in questa pagina per migliorare l'esperienza utente pubblicando immagini di dimensioni diverse su dispositivi diversi.
Immagini adattabili e Core Web Vitals
Quando pubblichi immagini responsive, la pagina valuta le funzionalità di visualizzazione del dispositivo dell'utente e sceglie una di una serie di immagini candidate ottimali per la visualizzazione in base a questi criteri. In questo modo, i tuoi utenti risparmiano dati, principalmente perché vengono mostrate immagini più piccole sui dispositivi con schermi più piccoli.
Gli effetti di un caricamento più rapido delle immagini possono estendersi anche al Largest Contentful Paint (LCP) della tua pagina. Ad esempio, se l'elemento LCP della tua pagina è un'immagine, pubblicarla in modo responsivo può ridurre la durata del caricamento delle risorse.
Durate di caricamento delle risorse più brevi riducono il tempo di caricamento di un'immagine LCP, migliorando il punteggio LCP della pagina. Un valore LCP più basso significa che gli utenti percepiranno il caricamento del tuo sito come più rapido, soprattutto per quanto riguarda i contenuti più importanti (l'elemento LCP). La pubblicazione di immagini adattabili può anche ridurre la contesa della larghezza di banda per altre risorse sulla pagina, il che può migliorare la velocità di caricamento della pagina in generale.
Ridimensionare le immagini
Due degli strumenti di ridimensionamento delle immagini più utilizzati sono il pacchetto npm sharp e lo strumento a riga di comando ImageMagick.
Il pacchetto sharp è una buona scelta per automatizzare il ridimensionamento delle immagini (ad esempio, generare miniature di più dimensioni per tutti i video sul tuo sito web). È veloce e si integra bene con gli script e gli strumenti di compilazione. ImageMagick è più adatto per il ridimensionamento una tantum delle immagini perché viene eseguito interamente dalla riga di comando.
nitida
Per utilizzare sharp come script Node, salva questo codice come script separato nel progetto, quindi eseguilo per convertire le immagini:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Per ridimensionare un'immagine al 33% delle dimensioni originali, esegui il seguente comando nel tuo terminale:
convert -resize 33% flower.jpg flower-small.jpg
Per ridimensionare un'immagine in modo che rientri in uno spazio di 300 x 200 pixel, esegui il seguente comando:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Quante versioni delle immagini dovresti creare?
Non esiste una singola risposta "corretta" a questa domanda. Tuttavia, è comune pubblicare da 3 a 5 dimensioni diverse di un'immagine. Pubblicare più dimensioni delle immagini è l'ideale per ottenere un rendimento migliore, ma occupa più spazio sui tuoi server e richiede una quantità leggermente maggiore di codice HTML.
Altre opzioni
Vale la pena dare un'occhiata anche a servizi di immagini come Thumbor (open source) e Cloudinary. Entrambi sono modi semplici per creare immagini adattabili che consentono anche la manipolazione delle immagini su richiesta. Per configurare Thumbor, installalo sul tuo server. Cloudinary si occupa di tutti i dettagli e non richiede la configurazione del server.
Pubblicare più versioni delle immagini
Quando specifichi più versioni di immagine, il browser sceglie quella migliore da utilizzare:
| Prima | Dopo |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480 w, fiore-large.jpg 1080 w" dimensioni="50vw"> |
Gli attributi
src,
srcset,
e sizes
del tag <img> interagiscono tutti per ottenere questo risultato finale.
L'attributo "src"
L'attributo src consente a questo codice di funzionare per i browser che non
supportano gli attributi srcset e sizes. Questi browser utilizzano il caricamento della risorsa specificata
nell'attributo src.
Attributo "srcset"
L'attributo srcset è un elenco separato da virgole di nomi file delle immagini e dei relativi descrittori di larghezza o densità.
Questo esempio utilizza
descrttori di larghezza,
che indicano al browser la larghezza di un'immagine in modo che non debba scaricarla per scoprirlo. 480w è un descrittore della larghezza che indica al browser che
flower-small.jpg ha una larghezza di 480 pixel. 1080w è un descrittore della larghezza che indica al browser che flower-large.jpg ha una larghezza di 1080 px.
Credito extra: non è necessario conoscere i descrittori di densità per pubblicare immagini di dimensioni diverse. Tuttavia, se vuoi scoprire come funzionano i descrittori di densità, consulta il lab di codice per il passaggio di risoluzione. I descrittori di densità vengono utilizzati per pubblicare immagini diverse in base alla densità di pixel del dispositivo.
L'attributo "sizes"
L'attributo sizes indica al browser quanto sarà ampia l'immagine quando viene visualizzata, anche se non influisce sulle dimensioni di visualizzazione dell'immagine, quindi devi comunque avere il CSS.
Il browser utilizza queste informazioni, insieme alle informazioni che conosce sul dispositivo dell'utente (incluse le dimensioni e la densità di pixel), per determinare quale immagine caricare.
Se un browser non riconosce l'attributo "sizes", ricorre al caricamento dell'immagine specificata dall'attributo "src". (sizes e srcset
sono stati introdotti contemporaneamente, quindi ogni browser supporta entrambi
gli attributi o nessuno dei due.)
Credito extra: se vuoi fare le cose in grande, puoi anche utilizzare l'attributo sizes per specificare più dimensioni dello slot. Questa soluzione è adatta ai siti web che utilizzano layout diversi per aree visibili di diverse dimensioni. Per scoprire come fare, consulta questo esempio di codice per più slot.
(Ancora più) Crediti extra
Oltre a tutti i crediti extra già elencati (le immagini sono complesse), puoi anche utilizzare questi stessi concetti per la direzione artistica. L'art direction è la pratica di pubblicare immagini completamente diverse (anziché versioni diverse della stessa immagine) in visualizzazioni diverse. Puoi approfondire l'argomento nel lab di codice per l'art direction.
Verifica
Dopo aver implementato le immagini responsive, puoi utilizzare Lighthouse per assicurarti di non aver perso nessuna immagine. Esegui il controllo del rendimento di Lighthouse (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Dimensioni delle immagini adeguate. Questi risultati elencano le immagini di cui devi ancora modificare le dimensioni.