Vediamo quindi come possiamo ottimizzare le immagini all'interno del nostro sito web, cosa molto importante in modo automatico e ricorrente, soprattutto se hai inserito delle immagini precedentemente all'interno del tuo sito web.
Quindi hai delle immagini, magari da anni all'interno del tuo sito web e sarebbe follia Scaricarle tutte comprimerne ottimizza e poi ricaricarle nuovamente riassegna nei relativi punti in cui appaiono e di conseguenza ci vengono in aiuto degli strumenti, come in questo caso Shore Pixel che fanno tutta questa operazione in modo automatico ricorrente, soprattutto senza applicare alcuna modifica alle tue immagini attuali.
Quindi tu potrai mantenere le tue immagini attuali all'interno del tuo sito web WordPress e Shore Pixel lavorerà su una rete parallela.
Questa rete parallela è una C D N che utilizza Shore pixel ed è in particolare la C D n di di Bunny C D N, che appunto è uno strumento che fa da DA C D N e offre anche servizi di ottimizzazione delle immagini.
Allora innanzitutto installiamo Shore Pixel.
In questo caso dobbiamo installare molto importante la versione, quindi fai aggiungi nuovo è un king gratuito.
Potete essere utilizzato in forma gratuita fino a un certo limite e poi è un piano a pagamento.
Tuttavia, il piano a pagamento ha un costo veramente irrisorio costa circa dieci dollari al mese e va bene per il novantanove percento dei siti web.
A meno che tu, appunto, non abbia una non non utilizzi una quantità di banda molto elevata.
Quindi effettua la ricerca Shore Pixel e nel momento in cui effettua questa ricerca, vedrai due versioni del plugin che sono questa la prima, che è una versione che funziona sostanzialmente allo stesso modo, ma solamente sulle immagini, um, cioè andando a ottimizzare le immagini direttamente all'interno del tuo sito web, quindi senza adoperare una C d n senza adoperare una rete che fa da ponte, mentre quello che ti consiglio di utilizzare è questo la versione, appunto, perché utilizza una C D n e quindi effettua questa ottimizzazione delle immagini e si chiama the fly.
Quindi nel momento in cui l'utente carica la pagina, quindi è qualcosa che avviene in tempo reale.
Una volta installato, lo attiviamo e dopodiché lo andiamo a configurare benissimo.
L'abbiamo attivato.
Premiamo impostazioni.
Okay.
Anzi, torniamo indietro, disattiviamo per un momento e ti faccio vedere l'immagine.
Okay.
L'immagine che ho caricato volontariamente sul sulla pagina web sull'homepage.
Allora ricarichiamo la nostra homepage.
Qui abbiamo già diverse immagini.
Tuttavia queste immagini, facendo parte di un tema, sono già otti- ben ottimizzate, quindi in realtà non andremo a ottenere un vero e proprio miglioramento.
Sicuramente c'è comunque un piccolo miglioramento, ma non notevole.
Io comunque ho caricato un'immagine proprio um nel nel modo più più semplice possibile dell'evento caricando l'immagine a dimensione reale.
Quindi in questo caso come dire un'immagine molto molto grande di duemila per millequattrocento circa e ha un peso piuttosto notevole.
Pesa intorno ai cinquecento kilowatt.
Ora facciamo f dodici, apriamo la nostra andiamo sotto la voce network, mettiamo il filtro per i mg e igs e vediamo la nostra immagine quanto okay pesa trecentosettanta chi è comunque un peso piuttosto notevole, quindi attiviamo ora pixel e andiamo a personalizzarlo.
In questo caso va benissimo il piano gratuito perché comunque ti dà accesso a tutte le funzionalità che ci servono e la prima cosa che vi consiglio di fare è attivare la modalità avanzata, quindi vedere le impostazioni avanzate del plug-in, quindi attiviamo la benissimo.
Ora possiamo scegliere tre livelli di compressione dell'immagine, così come l'abbiamo visto sul sito web di shore pixel.
Li ho quindi li ho già spiegati.
Nel nostro caso andremo a utilizzare una compressione co- l'oss, perché comunque non è un sito potenzialmente non è un sito web che in cui la qualità di un'immagine è così importante come potrebbe essere, ad esempio il sito web di un fotografo.
Scegliamo come convertire le immagini.
Quindi anche il processo di conversione del formato d'immagine avviene da Shore Pixel.
In questo caso mettiamo che vogliamo adoperare sia il formato web che il formato AVI F e in questo caso lo strumento ci dà a disposizione a quello che è una tabella tramite Keys di quello che è il supporto del formato che abbiamo scelto.
Quindi vediamo come il formato web ormai si sia adoperato da tutti i principali browser, anche safari, che è diciamo quello che è arrivato più in ritardo, mentre il formato AVI F c'è ancora qualche browser che non qualche browser in più che non lo supporta e un po' a livello generale, i browser si sono svegliati un po' più più in ritardo.
Comunque, in linea generale, sono entrambi formati che almeno il novanta novantacinque percento dei browser sono in grado di um di leggere e supportare.
Quindi attiviamo entrambi e le attiviamo per tutte le tipologie di immagine, quindi p n g, j, p e g e gif.
Okay, poi possiamo scegliere di rimuovere gli exit che sono dei dati del contenenti delle informazioni relative all'immagine.
Quindi ad esempio la macchina fotografica con cui è stata scattata l'immagine l'obiettivo e via dicendo.
In questo caso qui è a tua discrezione, io lo rimuovo, facciamo salve le modifiche e ora andiamo sotto la voce di quindi già così sta partendo l'ottimizzazione sulla destra vediamo il dominio che in questo caso non è associato.
Non ho associato ad alcun account perché non ho ancora creato un account.
Vediamo la quantità di traffico che abbiamo disponibile gratuitamente quindi la quantità di traffico sotto il quale passano le immagini che distribuisce shore pixel.
Quindi una volta esaurito quel traffico e la banda shore pixel utilizza eh chiaramente chiede chiede il pagamento, chiede l l'utilizzo di un piano a pagamento e sotto abbiamo il traffico invece della c d n, quindi il traffico pro- sotto il quale passano le immagini, mentre quello sopra è il traffico relativo al sito web.
Possiamo anche caricare del traffico um in modo prepagato, quindi caricare, acquistare ad esempio cinquecento gigabyte di traffico C D N o altro in modo tale da predisporlo averlo lì per diversi mesi o quando ci sarà necessario.
Ora andiamo su e qui abbiamo un po' di funzionalità aggiuntive.
Abbiamo la possibilità di mettere l'effetto faide in, cioè il fatto che vediamo l'immagine che si sta costruendo nel corso dei dei decimi di secondo tra poco.
Anzi, vediamo subito qual è l'effetto.
Aggiorniamo qui la pagina l'effetto.
Okay, ora probabilmente non lo vediamo.
Vediamo se l'ottimizzazione è già avvenuta.
Ovviamente ci attiva la funzione per cui l'ottimizzazione non avviene.
Esatto, perché siamo loggati.
Comunque è una cosa che che vediamo successivamente è un effetto, appunto un po' più carino.
Effettivamente fa percepire all'utente che l'immagine è in corso di caricamento.
Poi la possibilità di attivare lo smart, che è una funzione che va a tagliare l'immagine nel modo più um più intuitivo possibile.
Cioè, il sistema cerca di capire in modo in modo automatico qual è la parte dell'immagine più interessante.
Se L'immagine dovesse essere troppo grande, la va a tagliare e ritaglia la taglia in prossimità dell'area interessante molto spesso non è non è necessaria, quindi non l'attiviamo.
In questo caso utilizza il metodo search o search set, che sono due metodologie tramite tramite cui è possibile sostituire um un'immagine all'interno del codice H T M l.
Sostanzialmente search è sono tutte le immagini che generalmente vengono caricate senza alcun tipo di differenziazione tra i vari dispositivi, mentre Search sette è una funzionalità che è stata introdotta successivamente con i c h t m l e che WordPress adopera già per far sì che nel momento in cui noi carichiamo, ad esempio un'immagine così in grande um WordPress, non vada a caricarla così in grande per tutti i dispositivi, ma la adatta in parte ai dispositivi.
O meglio va a creare, ad esempio, quattro o cinque varianti di questa immagine in dimensioni sempre più piccole, in modo tale che in funzione della dimensione massima della risoluzione massima supportata dal dispositivo in uso.
Quindi, ad esempio, se stiamo navigando il sito web con uno smartphone, lui va a A, diciamo a tarare la risoluzione, ad operare il la pre configurazione di questo, ma la diciamo la La versione di questa immagine più piccola che hai a disposizione, quindi, è una sorta di adattamento automatico.
Non è proprio un adattamento al pari della risoluzione massima del dispositivo in uso, ma cerca di avvicinarsi.
In questo caso lasciamo lo possiamo lasciare, eh? Lo possiamo lasciare anche search possiamo provare il boss quindi in questo caso ci dice che il boss è ex, cioè in stato sperimentale lasciamo tranquillamente anche il l's r c generate non scrip tag in questo caso i i tutti i browser che non supportano javascript, perché in questo caso shore pixel utilizza javascript per andare a effettuare queste tipologie di ottimizzazione può generare il tag uno script, quindi va a generare una um una soluzione alternativa per tutti i browser che non supportano javascript in realtà è su i browser che non supportano javascript ormai praticamente non esistono.
Quindi puoi anche ignorare questa impostazione.
Poi a p i real in questo caso ti consiglio di non effettuare alcuna modifica a meno che non hai un dominio personalizzato e non vuoi creare la tua C D N sul tuo dominio personalizzato l'asd lo vediamo successivamente nel momento in cui andremo a parlare di quello che è la funzionalità di Lazy Lodi in questo caso non ci interessa in quanto riguarda tutte quelle immagini che nascondono al di sotto altre immagini, cioè ovvero quelle situazioni in cui passando il mouse un'immagine quell'immagine si mostra al di sotto un'altra immagine con un'animazione sono situazioni un po' piuttosto atipiche, quindi nel nostro caso non ci interessa.
Possiamo scegliere se ottimizzare le immagini anche per gli utenti loggati, quindi se mostrare l'ottimizzazione delle immagini anche agli utenti loggati oppure no.
Poi l QI in questo caso i sono le anteprime sostanzialmente le immagini, cioè il il box all'interno del quale poi verrà inserita l'immagine verrà caricata l'immagine e invece di avere un box bianco possiamo scegliere di avere un'immagine in una qualità bassissima.
Non consiglio di attivarlo, anche perché molto spesso l'immagine viene caricata veramente in pochissimi decimi di secondo la loading um ora trattiamo il tema lodi.
Il tema lodi è molto importante in quanto come già spiegato nella diciamo in quelle che erano le analisi, il modulo relativo all'analisi di un sito web ci permette di caricare un'immagine così come un altro tipo di elemento che può essere ad esempio un video solamente nel momento in cui sta per essere visualizzato all'interno dello schermo.
Quindi nel caso della nostra immagine del tramonto, invece di caricare l'immagine del tramonto qui nel momento in cui l'utente carica per la prima volta la pagina verrà caricata mentre l'utente sta facendo scrollo e si sta avvicinando a quest'area.
In questo modo, se l'utente dovesse fermarsi solo qui e navigare in una pagina interna non caricherà quell'immagine inutilmente, quindi è un è un è una modalità, una funzionalità per risparmiare molto spazio, soprattutto nel primo caricamento di pagina e quindi per far sì che il primo caricamento di pagina sia molto più rapido.
Il les in questo caso la funzionalità ci permette di attivare il il nativo è una funzionalità grazie al quale nativamente il browser e lo supportano ormai quasi tutti, quasi tutti i browser tranne safari, anche se recentemente mi sembra che l'abbia introdotto in modalità sperimentale um ha la possibilità appunto di supportare questa funzionalità senza l'uso di javascript, quindi sostanzialmente la supporta direttamente in modo nativo.
All'interno del browser quindi viene eseguita in modo molto più fluido perché appunto la riconosce nativamente il browser e soprattutto non non non c'è il rischio che non venga eseguita correttamente, perché chiaramente averla in javascript è una cosa averla all'interno del browser è un'altra e la funzionalità che avevamo sopra il è la quantità di pixel oltre la quale meglio um prima della quale viene caricata un'immagine cioè ti ti ti faccio un esempio se noi prendiamo questo caso abbiamo l'immagine del tramonto qui.
Se noi scegliamo cinquecento pixel facciamo sì che cinquecento pixel prima di questa immagine viene caricata.
Se invece noi scegliessimo duecento pixel faremmo sì che l'immagine verrebbe caricata solamente nel momento in cui è duecento pixel distante rispetto allo scroll dell'utente.
Quindi più corta è questa distanza e più c'è il rischio che l'utente se ne accorga che venga caricata dopo non è non è un grande problema, semplicemente percepirà che l'immagine non era la carica sin da subito cinquecento pixel direi che è un ottimo compromesso.
Tornando all'esito del nativo ti consiglio assolutamente di attivarlo nonostante appunto safari ancora non lo supporti pienamente è una funzionalità molto, molto utile e se l'utente sta navigando ad esempio utilizzando gle chrome potrà usufruirne.
Poi wills and the high in questo caso ci dà la possibilità di modificare proprio a livello di codice um l'altezza e la larghezza dell'immagine affinché rifletta quella eh, quella appunto ridimensionata proprio da shore pixel.
In questo caso non ti consiglio di attivarla perché è una cosa che fa già e via già scritto da Shore Pixel si from post meta in questo caso anche qui va a adattarlo a quello che è la la dimensione dell'immagine iniziale, in modo tale che non si crei le ovvero che non si crei variazione dell'impaginazione è difficile che accada, quindi ti consiglio di attivarlo solamente se verifichi questa variazione.
Poi size break points questa è una funzionalità piuttosto utile, simile a quella di cui ti parlavo prima relativamente a wordpress ovverossia far sì dal momento in cui shore pixel va a ridimensionare un'immagine, come ti dicevo prima on the fly, quindi nel momento in cui l'utente la carica, adesso simuliamo ad esempio un utente con un dispositivo specifico con Samsung galaxy s venti ultra.
Nel momento in cui l'utente la carica con quattrocentododici pixel di larghezza quell'immagine verrà proprio caricata con quattrocentododici pixel di larghezza massima.
Cosa succede però che chiaramente shale pixel non ha in cash tutte le versioni per ogni singola risoluzione per ogni possibile risoluzione, perché sarebbero infinite.
Quindi cosa succede? Ti puoi dire guarda se vuoi, um tempi caricamento ancora più rapidi posso far sì che ti arrotondo questa risoluzione a um all'immagine più vicina che avevo già generato precedentemente, quindi se precedentemente magari aveva generato un'immagine di quattrocentocinquanta pixel di larghezza.
Non uz non non la rigenera, non la rigenererà nuovamente a dodici pixel ma utilizzerà quella da quattrocentocinquanta.
Quindi peserà magari un pochino di più quell'immagine perché non è esattamente questa risoluzione, ma verrà fornita in modo più rapido.
All'utente quindi questa tua discrezione io preferisco non attivarlo.
Infine c'è il nuovo sistema di e i che diciamo utilizza non utilizza che è una libreria di javascript, ma lo fa in modo presumibilmente più veloce.
Io l'ho provato su diversi siti web e onestamente non mi sono trovato molto bene, quindi al momento letti puoi comunque provarlo.
Sappiamo le modifiche perfetto.
Ora andiamo su Ares e qui abbiamo la possibilità di personalizzare altre impostazioni.
In particolare ci permette, ad esempio, di utilizzare la funzione di lazy load per le immagini in background, quindi le immagini di sfondo perché considera che l'as load è una funzionalità.
In realtà è un attributo a livello di codice che viene aggiunto ad esempio a un tag M G, quindi a un tag immagine e un tag t m è un tag H t m l ma questo tg chiaramente, o meglio le immagini di sfondo.
Quindi le immagini di background in realtà non eh magari possono essere contenute all'interno di un div o all'interno di un altro elemento h d m l e di conseguenza non riuscirebbe a effettuare le sd.
Di conseguenza queste due funzionalità ti permettono di abilitarlo anche per le immagini di sfondo.
Qualora dovessero causarmi causare dei malfunzionamenti, ti consiglio di disabilitare.
Poi possiamo scegliere la larghezza massima di un background di uno sfondo.
Se ad esempio abbiamo un sito web con un'immagine a tutto a tutto schermo di uno sfondo, noi possiamo definire una ragazza massima, ad esempio millenovecentoventi.
Se poi un utente ha un uno schermo in quattro k vedrà vedrà al massimo millenovecentoventi pixel, però diciamo che è comunque un valore raccomandato per gran parte um degli utenti ancora hanno dispositivi massimo a massimo in full h d, quindi millenovecentoventi per milleottanta poi c s s anche questo questa in realtà è un'integrazione con cash e ci permette di sostituire anche quelle che sono le immagini di sfondo e che quindi chi si deve abilitarlo in questo caso quello che ti va a dire è attenzione perché se stai utilizzando in particolare un web server apache um devi aggiungere questo devi aggiungere delle direttive all'interno del del file H T acces che è il file che determina il funzionamento, diciamo lato server del del tuo sito web.
Quindi in caso ti consiglio di di farlo e di seguire le direttive eventualmente guarda la documentazione, poi c'è la possibilità di di di distribuire sempre tramite la sua C D n anche i javascript.
Questo non c'entra nulla con le immagini, però se vuoi puoi attivarlo.
Chiaramente serve principalmente a sempre diminuire il carico del nostro server, cioè far sì che i Java vengono distribuiti da da shore pixel fa sì che non li distribuiamo noi dal nostro server e di conseguenza alleggeriamo un po' il carico.
Possiamo anche, um sotto fare delle altre degli altri miglioramenti a che però in questo caso non ci non ci non ci interessano e l'ultima funzione è quella dell'integrazione con l' T e l T che hanno un sistema di lix che potresti avere all'interno nel tuo sito web.
Quindi qualora avessi questo sistema abilitato pure se facciamo salva modifiche e infine l'ultima area riguarda le esclusioni, quindi qui abbiamo la possibilità di non effettuare l'ad.
Quindi il caricamento um il caricamento pigro, ovvero il caricamento nel momento in cui l'utente si sta avvicinando a quell'area su specifiche immagini.
Ad esempio quindi qui puoi indicare la classe o l'id dell'elemento o dell'immagine possiam decidere di non ridimensionare immagini specifiche, quindi magari è un'immagine in particolare che vogliamo tenere la massima risoluzione che si deve vedere assolutamente nel modo migliore possibile.
Possiam far sì che non la cri dimensioni, ma che ridimensioni tutte le altre oppure che vada a ignorare completamente l'ottimizzazione di alcune immagini specifiche.
Possiam fare la stessa cosa con gli u r l.
Quindi supponiamo che tu sia un fotografo, magari la pagina iniziale, la pagina in cui ti promuovi potresti ottimizzarlo quindi ottimizzare le immagini, poi magari vuoi mandare rimandare un portfoglio in quel portfoglio vuoi che l'ottimizzazione non avvenga perché nel portfoglio non importa che l'utente impieghi dieci secondi a caricarlo perché di la qualità deve essere veramente massima e quindi puoi escludere delle degli u r l utilizzando anche delle rex, quindi delle formule oppure delle pagine specifiche.
Ora in questo caso non ci interessa escludere niente, quindi semplicemente andiamo sul nostro sito web sulla nostra pagina web e vediamo se applicato le ottimizzazioni.
Considera che in genere richiede qualche minuto affinché appunto vada a generare la copia di queste immagini sulla sua C D n e inizia a distribuirla.
Andiamo sempre sotto la scheda network, ricarichiamo la pagina okay, e la prima cosa interessante che potresti aver notato è che l'immagine del tramonto che ho caricato non è stata non è stata scaricata.
Quindi cosa succede? Che quell'immagine non essendo presente immediatamente al caricamento di pagina, non non viene scaricata perché gli ha assegnato la funzione.
La lode quindi viene scaricata solamente nel momento in cui mi avvicino a quell'area.
Ora infatti scorro Okay, come vedi ha scaricato il nostro la nostra la nostra immagine in questo caso l'ha l'ha scaricata dal server di shore Pixel ha fatto un reindirizzamento a l'immagine nostra, quindi evidentemente non ha ancora terminato.
L'ottimizzazione.
Adesso aspettiamo qualche minuto.
Che termini l'ottimizzazione.
Intanto navighiamo il sito web e una volta fatto vedremo l'ottimizzazione di queste immagini perfetto l'ottimizzazione o per il fatto delle verifiche è completata e e quello che ti consiglio di di verificare ora è il peso.
Verifichiamo insieme quello che è il peso iniziale di questa immagine, quindi scorriamo verso il basso, viene caricata e il peso iniziale? No, che qui lo vediamo ancora ottimizzato.
Vediamo qual era il peso iniziale.
Dell'immagine.
Andiamo su media.
Okay, libreria media.
Eccola qua.
Il peso iniziale dell'immagine era di ben cinquecentosedici kilobyte.
Quindi ora torniamo sulla nostra scheda, ricarichiamo la pagina come vedi, L'immagine per il momento non è essere scaricata.
Non ignoro, diciamo quelle che sono le altre immagini in quanto, come ti dicevo, sono già state ottimizzate alla base a monte prima di essere caricate e andando sotto vediamo che Imma okay, in questo caso è in cash facciamo il cash ricarichiamo, andiamo sotto e come vedi l'immagine ora innanzitutto è in formato avi F, come vedi sotto la voce type, mentre prima era in formato pg, quindi ha utilizzato un formato di immagine moderno e in secondo luogo ha un peso di settanta kilowatt contro i cinquecentosedici iniziali.
Chiaramente, se noi apriamo l'immagine, la qualità percepita potrà essere leggerissimamente più bassa, ma sostanzialmente, soprattutto se caricata appunto in in formato ancora più piccolo è impercettibile, considera che ha un peso di settanta kilobyte, perché comunque viene viene mostrata all'interno della pagina quasi a tutto schermo.
Se questa immagine venisse mostrata ad esempio, una risoluzione simile a questa eh? Chiaramente avrebbe un peso ancora inferiore.
E se noi carichiamo la stessa immagine la cosa curiosa è che se noi carichiamo la stessa immagine simulando facendo cli qui un dispositivo mobile, quindi sempre un Samsung Galaxy S venti ultra ricarichiamo l'immagine, carichiamo tutta la pagina web l'immagine in questo caso viene caricata completa disabilitiamo la cash perché dobbiamo fargliela generare per la prima volta.
Okay, facciamo lo scroll.
Adesso ricarichiamo nuovamente.
Okay.
Ri disabilitiamo la cash, ricarichiamo la pagina e vediamo quanto c'era.
Okay, non l'ha ancora generata.
Adesso aspettiamo ancora qualche minuto.
Chiaramente.
Okay, eccola qua.
L'ha rigenerata e lo vediamo dall' u r l da cui proviene che è C d n appunto shorts pixel punto i e in questo caso l'immagine pesa ottanta kilobyte.
Ah, comunque viene in questo caso non l'ho nemmeno ottimizzata io e viene comunque rica- caricata una risoluzione piuttosto grande, ma comunque anche in questo caso, come vedi è stata, um è stata ridimensionata e adattata alla dimensione massima del dispositivo in uso.
Infatti, se noi facciamo tasso destro per il new tab, quello che va a fare lo strumento è di caricare l'immagine.
Come vedi utilizzando l'attributo v W um trattino basso che sta appunto per it, cioè larghezza, che è la larghezza massima supportata dal dispositivo.
In questo caso non è così per il semplice fatto che questa immagine non l'ho adattata a dispositivi mobili, ma ha fatto sì che venisse caricata um in qualsiasi modo a risoluzione massima.
In effetti, infatti, come vedi straborda da quello che è lo schermo, quindi la stessa.
Lo stesso principio viene applicato poi a tutte le altre immagini.
Se noi proviamo a ricaricare la pagina, vediamo se dalle altre immagini vediamo che effettivamente sono state sono state convertite e ottimizzate se scorriamo verso il basso.
Okay, questo probabilmente ancora non l'ha fatto perché sta caricando, sta ancora caricando la rete e di conseguenza deve ancora generare queste immagini.
Ecco, vedi dopo due tre volte che lo ricarichiamo chiaramente sto simulando gli utenti che navigano.
Queste immagini vengono generate, quindi navighiamo un po' il sito web.
Come vedi le le immagini vengono caricate man mano che navighiamo, quindi tutte utilizzano le lodi e se andiamo a vedere quelle che sono le immagini che ha scaricato, adesso disabilitiamo ancora nuovamente la cash e la riabilitiamo.
Facciamo questo gioco appunto per simulare la navigazione degli utenti Okay, Adesso nuovamente la cash ricarichiamo.
Okay, ora vediamo l'immagine direttamente, senza alcun tipo di reindirizzamento.
E come vedi, hanno un peso veramente irrisorio.
Ora non ricordo esattamente quale fosse il peso precedente.
Adesso lo andiamo a verificare.
Anche se comunque, come ti dicevo, erano immagini già ottimizzate.
Prendiamo ad esempio questa si chiama home page.
Meno offers score tre.
La cerchiamo qui all'interno della libreria media di WordPress.
Eccola qui Abbiamo un peso di diciannove kilobyte.
Comunque un'immagine già con una dimensione molto piccola e da diciannove kilowatt è passata a offers tre.
Eccola qui, a cinque kilobyte, quindi è stata ridotta di quattro volte.
Nonostante sia un'immagine piccola si sia un'immagine Già, um probabilmente compressa.
La riduzione è veramente tanto alta e se guardiamo la qualità percepita, io non noto quasi nessuna differenza, probabilmente qualcosina, forse a livello di colore, ma è veramente qualcosa di impercettibile.
Quindi sostanzialmente queste modifiche applicate su immagina questo processo applicato su decine o centinaia di immagini per tutte le immagini che hai all'interno del tuo sito web fanno risparmiare un sacco di carico del server perché deve fornire meno risorse agli utenti.
Fanno risparmiare risorse agli utenti che navigano il sito web, quindi devono scaricare meno dati e chiaramente scaricheranno le pagine web in modo molto più rapido.
Vedi tutto
