Rendimento delle immagini

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:

1. Compressione persa
2. Compressione senza perdita

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:

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:

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

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.