Le immagini sono spesso la risorsa più pesante e più diffusa sul web. Come l'ottimizzazione delle immagini può migliorare notevolmente il rendimento del sito web. Nella maggior parte dei casi, ottimizzare le immagini significa ridurre il tempo di rete tramite l'invio ma puoi anche ottimizzare la quantità di byte inviati all'utente pubblicando immagini di dimensioni adeguate per il dispositivo dell'utente.
Le immagini possono essere aggiunte a una pagina utilizzando gli elementi <img> o <picture>, oppure
la proprietà background-image del CSS.
Dimensioni dell'immagine
La prima ottimizzazione che puoi eseguire per usare le risorse delle immagini è per mostrare l'immagine nella dimensione corretta, in questo caso il termine size si riferisce a le dimensioni di un'immagine. Senza considerare altre variabili, viene visualizzata un'immagine in un contenitore di 500 x 500 pixel sarebbero dimensionate in modo ottimale a 500 pixel 500 pixel. Ad esempio, se utilizzi un'immagine quadrata da 1000 pixel, l'immagine viene sono due volte più grandi.
Tuttavia, ci sono molte variabili coinvolte nella scelta delle dimensioni corrette delle immagini. rendendo in ogni caso l'attività di scegliere la giusta dimensione delle immagini complicato. Nel 2010, quando fu lanciato l'iPhone 4, la risoluzione dello schermo (640 x 960) era il doppio di quello dell'iPhone 3 (320 x 480). Tuttavia, le dimensioni fisiche schermo di iPhone 4 è rimasto più o meno lo stesso di iPhone 3.
Mostrare tutto a una risoluzione più alta avrebbe reso testo e immagini significativamente più piccoli: metà della loro dimensione precedente, per l'esattezza. Invece, 1 pixel sono diventati 2 pixel del dispositivo. Questo valore è chiamato DPR (Device Pixel Ratio). La iPhone 4, e molti modelli di iPhone rilasciati dopo, aveva un DPR di 2.
Riprendendo l'esempio precedente, se il DPR del dispositivo è pari a 2 e l'immagine è visualizzata in un container di 500 x 500 pixel, poi un'immagine quadrata da 1000 pixel (indicata come dimensione intrinsica) è ora la dimensione ottimale. Analogamente, se dispositivo ha una DPR pari a 3, allora un'immagine quadrata di 1500 pixel sarebbe la dimensione ottimale.
srcset
L'elemento <img> supporta l'attributo srcset, che consente di specificare un
elenco delle possibili origini di immagini che il browser potrebbe utilizzare. Ogni origine immagine specificata
deve includere l'URL dell'immagine e un descrittore di larghezza o di densità pixel.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
Lo snippet HTML precedente utilizza il descrittore di densità dei pixel per suggerire il browser
per utilizzare image-500.png sui dispositivi con un DPR pari a 1, image-1000.jpg sui dispositivi
con un DPR pari a 2 e image-1500.jpg sui dispositivi con un DPR pari a 3.
Anche se tutto questo può sembrare semplice, il DPR di uno schermo non è l'unico considerazione nella scelta dell'immagine ottimale per una determinata pagina. Il parametro layout è un'altra considerazione.
sizes
La soluzione precedente funziona solo se l'immagine viene visualizzata nello stesso pixel CSS per tutte le aree visibili. In molti casi, il layout di una pagina e lo spazio delle dimensioni del cluster, che cambia in base al dispositivo dell'utente.
L'attributo sizes ti consente di specificare un insieme di dimensioni di origine, in cui ogni
le dimensioni dell'origine sono composte da una condizione multimediale e un valore. Attributo sizes
descrivono le dimensioni di visualizzazione previste dell'immagine in pixel CSS. Se combinato
con i descrittori di larghezza srcset, il browser può scegliere quale origine immagine
è la scelta migliore per il dispositivo dell'utente.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
Nello snippet HTML precedente, l'attributo srcset specifica un elenco di immagini
candidati tra cui il browser può scegliere, separati da virgole. Ogni candidato in
l'elenco è composto dall'URL dell'immagine, seguito da una sintassi che indica
larghezza intrinseca dell'immagine. Le dimensioni intrinseche di un'immagine sono le sue dimensioni. Per
ad esempio, un descrittore 1000w indica che la larghezza intrinseca dell'immagine è
1000 pixel di larghezza.
Utilizzando queste informazioni, il browser valuta la condizione dei contenuti multimediali nell'sizes
e, in questo caso, riceve istruzioni che, se la larghezza dell'area visibile del dispositivo
supera i 768 pixel, l'immagine viene visualizzata con una larghezza di 500 pixel. Sulle più piccole
dispositivi, l'immagine viene mostrata nella stessa posizione (100vw) o con l'intera larghezza dell'area visibile.
Il browser può quindi combinare queste informazioni con l'elenco di immagini srcset
per trovare l'immagine ottimale. Ad esempio, se l'utente usa un dispositivo mobile
dispositivo con larghezza dello schermo di 320 pixel e DPR pari a 3, l'immagine viene visualizzata
alle ore 320 CSS pixels x 3 DPR = 960 device pixels. In questo esempio, il modello
l'immagine delle dimensioni sarà image-1000.jpg con una larghezza intrinseca di 1000
pixel (1000w).
Formati file
I browser supportano diversi formati di file immagine. Formati di immagine moderni come WebP e AVIF potrebbero fornire una compressione migliore rispetto a quella dei formati PNG o JPEG, rendendo le tue dimensioni del file immagine più piccole e quindi il download richiede meno tempo. Mediante la pubblicazione di immagini nei formati moderni, puoi ridurre il tempo di caricamento di una risorsa, comporta una riduzione della metrica Largest Contentful Paint (LCP).
WebP è un formato ampiamente supportato che funziona su tutti i browser moderni. WebP spesso ha una compressione migliore rispetto a JPEG, PNG o GIF, offrendo sia lossy che compressione senza perdita di dati. WebP supporta inoltre la trasparenza del canale alfa anche quando utilizzando la compressione con perdita di dati, una funzione non offerta dal codec JPEG.
AVIF è un formato immagine più recente e, sebbene non sia ampiamente supportato come WebP, gode di un supporto ragionevole tra i vari browser. AVIF supporta sia i dati e la compressione senza perdita di dati. Inoltre, i test hanno evidenziato un risparmio superiore al 50% quando rispetto a JPEG, in alcuni casi. AVIF offre anche Wide Color Gamut (WCG) e Funzionalità HDR (High Dynamic Range).
Compressione
Per quanto riguarda le immagini, esistono due tipi di compressione:
La compressione con perdita di dati riduce l'accuratezza dell'immagine attraverso la quantizzazione, e ulteriori informazioni sul colore possono essere ignorate utilizzando il sottocampionamento della crominanza. La compressione con perdita è più efficace sulle immagini ad alta densità con molto rumore e colori, generalmente foto o immagini con contenuti simili. Questo perché gli artefatti prodotti dalla compressione con perdita di dati hanno molto meno probabilità di essere notati in immagini così dettagliate. Tuttavia, la compressione con perdita di dati può essere meno efficace immagini contenenti bordi nitidi, come disegni a linee, dettagli nitidi simili o testo. La compressione con perdita di dati può essere applicata a immagini JPEG, WebP e AVIF.
La compressione senza perdita riduce le dimensioni del file comprimendo un'immagine senza dati o una perdita di dati. La compressione senza perdita di dati descrive un pixel in base alla differenza rispetto al suo pixel vicini. La compressione senza perdita di dati è usata per GIF, PNG, WebP e AVIF.
Puoi comprimere le immagini utilizzando Squoosh, ImageOptim o un'immagine di ottimizzazione automatica. Quando esegui la compressione, non c'è un'impostazione universale adatta in tutti i casi. L'approccio consigliato sarebbe quello di sperimentare di compressione fino a un buon compromesso tra qualità dell'immagine e dimensioni del file. Alcuni servizi avanzati di ottimizzazione delle immagini possono farlo per te automaticamente, ma potrebbero non essere attuabili dal punto di vista finanziario per tutti gli utenti.
Elemento <picture>
L'elemento <picture> offre una maggiore flessibilità nello specificare più
immagini candidati:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Quando utilizzi elementi <source> all'interno dell'elemento <picture>, puoi aggiungere
per le immagini AVIF e WebP, ma torna a un'immagine precedente più compatibile
formati supportati se il browser non supporta formati moderni. Con questo approccio,
il browser sceglie il primo elemento <source> specificato corrispondente. Se possibile
per visualizzare l'immagine in quel formato, utilizza quell'immagine. In caso contrario, il browser
passa all'elemento <source> specificato successivo. Nel codice HTML precedente
il formato AVIF ha la priorità sul formato WebP, ricorrendo
il formato JPEG, se non è supportato né AVIF né WebP.
Un elemento <picture> richiede un elemento <img> nidificato al suo interno. La
Gli attributi alt, width e height sono definiti in <img> e utilizzati
indipendentemente dal fatto che <source> sia selezionato.
L'elemento <source> supporta anche media, srcset e sizes
attributi. Analogamente all'esempio <img> precedente, questi indicano
browser a quale immagine selezionare in aree visibili diverse.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
L'attributo media accetta una condizione multimediale. Nell'esempio precedente,
il DPR del dispositivo viene utilizzato come condizione dei contenuti multimediali. Qualsiasi dispositivo con un DPR maggiore di
o uguale a 1,5 utilizzerà il primo elemento <source>. L'elemento <source>
indica al browser che, sui dispositivi con un'area visibile più ampia di 768 pixel,
l'immagine candidata selezionata viene visualizzata con una larghezza di 500 pixel. Sui dispositivi più piccoli,
occupa l'intera larghezza dell'area visibile. Combinando media e srcset
puoi avere un controllo più preciso sull'immagine da utilizzare.
Questo aspetto è illustrato nella tabella seguente, in cui diverse larghezze dell'area visibile e Vengono valutate le proporzioni pixel del dispositivo:
| Larghezza area visibile (pixel) | 1 RPD | 1,5 DPR | 2 RPD | 3 RPD |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
I dispositivi con DPR pari a 1 scaricano l'immagine image-500.jpg, inclusa la maggior parte
utenti di computer desktop, che visualizzano l'immagine a una dimensione estrinseca di 500 pixel di larghezza. Attivato
Gli utenti di dispositivi mobili con un DPR pari a 3 scaricano un'immagine
image-1500.jpg: la stessa immagine utilizzata sui computer con un DPR pari a 3.
<picture>
<source
media="(min-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
In questo esempio, l'elemento <picture> viene regolato per includere un ulteriore
Elemento <source> per utilizzare immagini diverse per dispositivi larghi con un DPR elevato:
| Larghezza area visibile (pixel) | 1 RPD | 1,5 DPR | 2 RPD | 3 RPD |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000 sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000 sm.jpg | 1500-m.jpg |
| 560 | 500.jpg | 1000 sm.jpg | 1000 sm.jpg | 1500-m.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Con questa query aggiuntiva, puoi vedere che image-1000-sm.jpg e
image-1500-sm.jpg vengono visualizzate in aree visibili di piccole dimensioni. Queste informazioni aggiuntive
consente di comprimere ulteriormente le immagini, poiché gli artefatti di compressione non sono
visibile con quella dimensione e quella densità, senza compromettere la qualità dell'immagine
sui computer.
In alternativa, modificando gli attributi srcset e media, puoi evitare
per la pubblicazione di immagini di grandi dimensioni su aree visibili di piccole dimensioni:
<picture>
<source
media="(min-width: 560px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Nello snippet HTML precedente, i descrittori di larghezza sono stati rimossi a favore
di descrittori del rapporto pixel del dispositivo. Le immagini pubblicate su un dispositivo mobile sono limitate
a /image-500.jpg o /image-1000.jpg, anche sui dispositivi con un DPR pari a 3.
Come gestire la complessità
Quando lavori con immagini adattabili, puoi ritrovarti con molte immagini diverse varianti di dimensioni e formati per ogni immagine. Nell'esempio precedente, le varianti per ogni dimensione, ma sono esclusi AVIF e WebP. Quante varianti dovresti che hai? Come molti problemi di ingegneria, la risposta tende a essere "dipende".
Nonostante la tentazione di apportare quante più varianti siano la soluzione migliore, ogni variante dell'immagine aggiuntiva ha un costo e fa un uso meno efficiente nella cache del browser. Con una sola variante, ogni utente riceve la stessa immagine, in modo che possa essere memorizzata nella cache in modo molto efficiente.
D'altra parte, se ci sono molte varianti, ogni variante richiede un'altra dalla voce della cache. I costi del server possono aumentare e ridurre le prestazioni se la voce della cache della variante è scaduta e l'immagine deve essere recuperata di nuovo da il server di origine.
A parte questo, le dimensioni del documento HTML aumentano con ogni variante. Tu potresti ritrovarti a spedire più kilobyte di codice HTML per ogni immagine.
Pubblica le immagini in base all'intestazione della richiesta Accept
L'intestazione della richiesta HTTP Accept indica al server i tipi di contenuti che vengono inseriti.
del browser dell'utente. Queste informazioni possono essere utilizzate dal server per pubblicare
il formato dell'immagine ottimale senza aggiungere ulteriori byte alle risposte HTML.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
Lo snippet HTML precedente è una versione semplificata del codice che puoi aggiungere
al backend JavaScript del server per scegliere e pubblicare il formato dell'immagine ottimale.
Se l'intestazione Accept della richiesta include image/avif, l'immagine AVIF viene
gestito. In caso contrario, se l'intestazione Accept include image/webp, l'immagine WebP
viene pubblicato. Se nessuna di queste condizioni è vera, l'immagine JPEG viene
gestito.
Puoi modificare le risposte in base ai contenuti dell'intestazione della richiesta Accept
in quasi tutti i tipi di server web: ad esempio, è possibile riscrivere richieste di immagini
sui server Apache in base all'intestazione Accept utilizzando mod_rewrite.
Questo comportamento è simile a quello che potresti trovare su una rete CDN (Content Delivery Network) per immagini (CDN). Le CDN di immagini sono soluzioni eccellenti per ottimizzare le immagini e inviare ottimale in base al dispositivo e al browser dell'utente.
La chiave è trovare un equilibrio, generare un numero ragionevole di immagini candidati e misurare l'impatto sull'esperienza utente. Immagini diverse possono dare risultati diversi e le ottimizzazioni applicate a ciascuna immagine dipendono dimensioni della pagina e dei dispositivi utilizzati dagli utenti. Ad esempio, un un'immagine hero a larghezza intera può richiedere più varianti rispetto alle immagini in miniatura su un pagina della scheda di prodotto di e-commerce.
Caricamento lento
È possibile indicare al browser di eseguire il caricamento lento delle immagini quando vengono visualizzate
area visibile utilizzando l'attributo loading. Un valore dell'attributo lazy indica
browser per non scaricare l'immagine finché non si trova all'interno (o vicino) all'area visibile. Questo
risparmia larghezza di banda, consentendo al browser di dare priorità alle risorse necessarie
esegue il rendering dei contenuti critici già presenti nell'area visibile.
decoding
L'attributo decoding indica al browser come deve decodificare l'immagine. R
il valore async indica al browser che l'immagine può essere decodificata in modo asincrono.
migliorando potenzialmente il tempo necessario per il rendering di altri contenuti. Il valore sync indica
browser in modo che l'immagine debba essere presentata contemporaneamente ad altri contenuti.
Il valore predefinito auto consente al browser di decidere cosa è meglio per
utente.
Demo di immagini
Verifica le tue conoscenze
Quali formati dell'immagine supportano la compressione senza perdita di dati?
Quali formati dell'immagine supportano la compressione con perdita di dati?
Cosa indica il descrittore di larghezza (ad esempio, 1000w)
il browser relativo a una candidata immagine specificata in un srcset
?
Cosa indica al browser l'attributo sizes in merito a
<img> elemento a cui è applicato?
srcset dell'elemento <img>,
date le dimensioni dell'area visibile corrente
dell'utente.
srcset dell'elemento <img>.
A seguire: rendimento dei video
Le immagini sono il tipo di contenuti multimediali più diffuso utilizzato sul web, ma sono molto lontane dall'unica che devi tenere a mente quando si tratta di prestazioni. Video è un altro tipo di media comune utilizzato sul web, che ha una propria considerazioni sulle prestazioni. Nel prossimo modulo di questo corso, approfondirai alcuni tecniche relative all'ottimizzazione dei video e a caricarli in modo efficiente.