Formattare correttamente immagini e video è fondamentale per un sito web, in quanto molto spesso queste risorse sono quelle che occupano più spazio all'interno del nostro disco, quindi del nostro server all'interno del nostro servizio di hosting e soprattutto perché sono risorse che molto spesso vengono poi fatte caricare all'utente in modo non compresso e di conseguenza l'utente va a caricare un'immagine, magari che abbiamo scattato con uno smartphone o con o peggio ancora con una macchina fotografica che pesa dieci o quindici megabyte e di conseguenza dieci quindici megabyte per un utente che magari si trova con con il proprio smartphone in un punto in cui la rete non è ottimale po posso impiegare anche trenta secondi ad essere scaricate e di conseguenza questo ci fa capire come sia importante ottimizzare immagini e video che molto spesso sono prevalenti all'interno delle nostre pagine web.

In questo caso qui abbiamo di fronte uno studio riguardo al formato web B, che è il primo aspetto da valutare nel momento in cui si va a caricare un'immagine sul nostro sito web, ovvero il formato d'immagine, il formato l'immagine fondamentale in quanto il J P G o il p n g che sono formati di immagine classici non sono i formati immagine ideali per essere caricati, essere usufruiti all'interno di una pagina web esistono appunto a diversi anni.

Il web B, che è un è un formato immagine creato da Google e ci esiste anche Avi F e probabilmente ne usciranno anche degli altri in futuro, che ci permette di avere con la stessa qualità percepita all'occhio umano una qualità um un un peso di immagine inferiore.

In questo caso abbiamo lo studio di Google che dimostra come utilizzando un indice S S i m, che è un indice che va a misurare la qualità percepita all'occhio umano ci mostra come vari test con varie qualità d'immagine.

Quindi qui abbiamo varie tabelle, perché Google ha fatto vari test su varie qualità d'immagine per vedere la differenza utilizzare il formato M P invece del formato G P g.

Vado a comprimere l'immagine del venti trenta percento circa.

Poi sotto ci sono anche tutti i vari grafici, ma sostanzialmente lo studio di per sé indica che mediamente c'è una un miglioramento di venticinque trenta punti percentuali rispetto al peso dell'immagine in formato web p rispetto a quello G pg, con la stessa appunto qualità di immagine percepita, quindi un miglioramento medio del trenta percento.

Direi che è piuttosto notevole.

In realtà il miglioramento può essere ancora più netto se quell'immagine viene anche compressa, cioè se quindi la sua qualità viene leggermente degradata um chiaramente in modo tale che all'occhio umano non non venga percepita, soprattutto se è un'immagine vista poi in in in piccolo, in modo tale che noi possiamo ulteriormente migliorare diciamo il peso di questa immagine.

In alcuni casi possiamo migliorarla del cento duecento per cento, quindi far sì che pesi molte molte volte meno, quindi anche due, tre, quattro volte meno rispetto al peso iniziale e in modo tale che un occhio umano quasi non si accorga nemmeno della perdita di qualità rispetto all'immagine originale.

Le stesse tipologie di ottimizzazioni possono essere applicate anche con ad esempio i video, quindi con il formato web M, quindi M di Milano um, anche i video possono essere compressi pur mantenendo la stessa, o meglio possono essere utilizzati con altri formati d'immagine con un peso inferiore, pur mantenendo la stessa qualità percepita.

Quindi questo è molto importante per le lezioni che vedremo successivamente rispetto all'ottimizzazione delle immagini e l'ottimizzazione dei video.

Un altro aspetto fondamentale riguarda proprio la risoluzione dell'immagine o la risoluzione del video.

Perché? Perché se noi andiamo a caricare un'immagine, ad esempio sempre scattata con lo smartphone o con una macchina fotografica che ha tanti mila pixel, di conseguenza una risoluzione dell'immagine molto molto alta, magari cinquemila per cinquemila, ottomila per ottomila, quattromila per quattromila e l'utente poi all'interno di una pagina web va a usufruire di quell'immagine in un formato magari di cinquecento per cinquecento.

Noi stiamo facendo sprecare inutilmente risorse a quell'utente, quindi quell'utente impiegherà molto più tempo a caricare quella pagina web che contiene quelle immagini senza che lui possa usufruire, che possa sfruttare quella dimensione di immagine perché chiaramente all'interno del suo schermo, che magari è uno smartphone, non potrà mai percepire la qualità, non non potrà mai leggere completamente quella risoluzione e di conseguenza è molto importante formattare appunto immagini e video prima che vengano caricati all'interno del nostro sito web.

Uno strumento, ad esempio, per formattare le immagini è sc-, o meglio per comprimerne è proprio Shore Pixel che è è anche lo strumento che vedremo nelle prossime elezioni.

Ora andiamo a vedere come Shore pixel appunto co-, così come tanti altri strumenti online, molto spesso anche gratuiti.

Anche shore pixel per questa attività è gratuito.

Possa ottimizzare un'immagine, quindi andare a comprimerla pur mantenendo la stessa qualità percepita all'occhio umano e quindi risparmiare molto spazio.

Ora carichiamo un'immagine.

Nel mio caso andrò a caricare un'immagine di un tramonto di un'immagine di un tramonto ad alta risoluzione un'immagine che ho preso da Free pick.

Eccola qui è un'immagine che pesa tredici punto sei megabyte, quindi è molto pesante.

Ha una risoluzione di migliaia di pixel.

Allora te la dico.

Ha una risoluzione di seimila per quattromila pixel, quindi è molto grande.

Ungi presumibilmente scattata con una macchina fotografica.

Okay, in questo caso ci dice addirittura ora il file è troppo pesante.

Quindi ora l'andiamo a ridimensionare.

Ho tagliato l'immagine, quindi mantenendo solamente le parti più interessanti in termini proprio di risoluzione di di di colore di qualità e l'ho ricaricata.

In questo caso l'immagine pesa uno virgola diciassette megabyte è una risoluzione di tremila e trecento per duemiladuecento circa in questo caso, eh? Shore pixel cosa ha fatto in pochi secondi mi ha ottimizzato l'immagine facendo sì che pesi pesi settantasette per cento in meno circa è chiaramente il risultato.

Grandioso.

Se noi facciamo il click sull'occhio abbiamo la possibilità di vedere il prima e dopo l'ottimizzazione dell'immagine nella parte di sinistra vediamo l'immagine originale con un peso di oltre un megabyte nell'immagine di destra un'immagine con un peso di due ottantacinque kilowatt, quindi una compressione del settanta percento circa.

Come vedi soprattutto sulle palme.

Qualche piccolo difetto si vede però chiaramente va va guardata, cioè guar- va guardata attentamente perché di base vedi quella prima quella dopo veramente il la differenza è quasi impercettibile la la la la la stessa cosa possiam farla con tre livelli di compressione.

Ora abbiamo scelto il livello di compressione l'oss che è il livello di compressione è un po' più aggressivo.

Quindi quello dove effettivamente c'è una perdita di qualità e un po' è percepibile l'occhio umano c'è il livello gssi che è una via di mezzo e c'è il livello lossless.

Il livello lossless è quello che ha a livello percepito dall'occhio umano non ci non non applica alcuna alcuna perdita di qualità.

Ora proviamo a ricaricare l'immagine nel formato loss, quindi con una compressione loss, quindi senza perdita di qualità.

Quindi, pur mantenendola la qualità più alta possibile e vediamo di quanto riesce a comprimerla.

Okay in questo caso la compressa solo del tre percento.

Quindi l'immagine di per sé era già aveva già un buono stato di compressione.

Proviamo col formato col con la tipologia di compressione Glass, quindi partendo sempre la nostra immagine di un megabyte due e in questo caso la comprime del sessantacinque per cento, quindi nettamente più nettamente più piccola in termini di dimensioni.

Come vedi, in questo caso io riesco a malapena a percepire la differenza.

Forse qualcosa veramente sulle palme, però è una differenza veramente quasi impercettibile.

Bisogna aprire l'immagine così in grande per poterlo percepire.

Perché immagina se immagina di vedere questa foto all'interno di un'area dello schermo molto più piccola o addirittura di vederla su uno smartphone, è quasi impossibile percepire che è stata che è stata compressa.

Tuttavia abbiamo risparmiato il sessantacinque percento di spazio, quindi sono risultati notevoli e questo chiaramente applicato su tutte le pagine del del nostro sito web comportano a un una riduzione del peso del della pagina veramente veramente notevole.