La pubblicazione di immagini in formato desktop sui dispositivi mobili può utilizzare da 2 a 4 volte più dati del necessario. Segui le linee guida in questa pagina per migliorare l'esperienza utente pubblicando immagini di dimensioni diverse su dispositivi differenti.
Immagini adattabili e Segnali web essenziali
Quando pubblichi immagini adattabili, la pagina valuta le funzionalità di visualizzazione del dispositivo dell'utente e sceglie una tra un insieme di immagini candidati ottimali per la visualizzazione in base a questi criteri. Questo consente di risparmiare dati per gli utenti, principalmente pubblicando immagini su dispositivi con schermi più piccoli.
Gli effetti di un caricamento più rapido delle immagini possono estendersi anche alla Largest Contentful Paint (LCP) della pagina. Ad esempio, se l'elemento LCP della tua pagina è un'immagine, pubblicarla in modo reattivo può ridurre il tempo di caricamento delle risorse.
Tempi di caricamento delle risorse più bassi riducono il tempo di caricamento di un'immagine LCP, migliorando il punteggio LCP della pagina. Con un valore LCP inferiore, il tuo sito verrà caricato più rapidamente, soprattutto se i contenuti più importanti (l'elemento LCP) verranno caricati più rapidamente. La pubblicazione di immagini adattabili può inoltre ridurre i conflitti di larghezza di banda per altre risorse sulla pagina, il che può migliorare la velocità di caricamento della pagina in generale.
Ridimensionamento delle immagini
Due degli strumenti di ridimensionamento delle immagini più popolari sono il pacchetto npm affilato e lo strumento interfaccia a riga di comando ImageMagick.
Il pacchetto nitido è un'ottima scelta per automatizzare il ridimensionamento delle immagini (ad esempio generando più dimensioni delle miniature per tutti i video sul tuo sito web). È veloce e si integra bene con strumenti e script di build. ImageMagick è più pratico per il ridimensionamento delle immagini una tantum perché viene eseguito interamente dalla riga di comando.
nitido
Per utilizzare sharp come script Node, salva questo codice come script separato nel tuo progetto, poi 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 questo comando nel terminale:
convert -resize 33% flower.jpg flower-small.jpg
Per ridimensionare un'immagine in modo che rientri in uno spazio di 300 px di larghezza per 200 px di altezza, esegui questo comando:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Quante versioni dell'immagine dovresti creare?
Non esiste un'unica risposta "corretta" a questa domanda. Tuttavia, è comune pubblicare 3-5 dimensioni diverse di un'immagine. La pubblicazione di immagini di dimensioni più elevate è migliore per migliorare le prestazioni, ma occupa più spazio sui tuoi server e richiede una scrittura leggermente più lunga di HTML.
Altre opzioni
Ti consigliamo di provare anche servizi di immagine come Thumbor (open source) e Cloudinary. Entrambi sono metodi semplici per creare immagini adattabili che consentono anche la gestione delle immagini on demand. Per configurare Thumbor, installalo sul tuo server. Cloudinary si occupa dei dettagli al posto tuo e non richiede alcuna configurazione del server.
Pubblica più versioni dell'immagine
Quando specifichi più versioni dell'immagine, il browser sceglie la migliore da utilizzare:
| Prima | Dopo |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" dimensioni="50vw"> |
Gli attributi
src,
srcset
e sizes
del tag <img> interagiscono per raggiungere questo risultato finale.
Attributo "src"
L'attributo src fa funzionare questo codice per i browser che non supportano gli attributi srcset e sizes. Questi browser tornano a caricare la 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à.
In questo esempio vengono utilizzati i descrittori di larghezza, che indicano al browser quanto è larga un'immagine, in modo da non dover scaricare l'immagine per scoprirlo. 480w è un descrittore di larghezza che indica al browser che
flower-small.jpg ha una larghezza di 480 px. 1080w è un descrittore di larghezza che indica al browser che flower-large.jpg ha una larghezza di 1080 px.
Ulteriore merito: Non è necessario conoscere i descrittori di densità per pubblicare immagini di dimensioni diverse. Tuttavia, se vuoi saperne di più sul funzionamento dei descrittori di densità, consulta il laboratorio sul codice per il passaggio della risoluzione. I descrittori di densità vengono utilizzati per pubblicare immagini diverse in base alla densità di pixel del dispositivo.
L'attributo "sizes"
L'attributo delle dimensioni indica al browser quanto sarà ampia l'immagine quando viene visualizzata, anche se non influisce sulle dimensioni di visualizzazione dell'immagine, quindi è comunque necessario utilizzare CSS.
Il browser utilizza queste informazioni, insieme a ciò che sa sul dispositivo dell'utente (incluse dimensioni e densità in pixel), per stabilire quale immagine caricare.
Se un browser non riconosce l'attributo "sizes", torna a caricare
l'immagine specificata dall'attributo "src". (sizes e srcset
sono stati introdotti contemporaneamente, pertanto ogni browser supporta entrambi gli attributi o nessuno dei due.)
Credito aggiuntivo: se vuoi sbizzarrirti, puoi anche utilizzare l'attributo dimensioni per specificare più dimensioni di slot. Ciò soddisfa i siti web che usano layout diversi per aree visibili di varie dimensioni. Per scoprire come fare, consulta questo esempio di codice per più slot.
(Ancora di più) Crediti extra
Oltre al credito aggiuntivo già elencato (le immagini sono complesse), puoi utilizzare questi stessi concetti anche per l'art director. La direzione artistica è la pratica di pubblicare immagini dall'aspetto completamente diverso (anziché versioni diverse della stessa immagine) in aree visibili diverse. Puoi scoprire di più nel code lab di Art Direction.
Verifica
Dopo aver implementato le immagini adattabili, puoi utilizzare Lighthouse per assicurarti di non aver perso nessuna immagine. Esegui il controllo delle prestazioni di Lighthouse (Lighthouse > Opzioni > Prestazioni) e cerca i risultati del controllo Immagini di dimensioni adeguate. In questi risultati vengono elencate le immagini che devi ancora ridimensionare.