Come velocizzare il tuo sito correggendo le tue immagini?

Le immagini non ottimizzate (o poco ottimizzate) sono il motivo più comune per la bassa velocità di caricamento del tuo sito web.

Forse il tuo sito Web si carica rapidamente, il 39% delle persone può ANCORA smettere di interagire con esso se le immagini non vengono caricate o impiegano troppo tempo per caricarsi.

E le immagini rappresentano il 68% del peso totale della pagina (che è MOLTO!).

Quindi, non possiamo rischiare di mantenere le immagini non ottimizzate.

Quindi, segui queste rapide tecniche per ottimizzare le tue immagini e garantire una maggiore velocità di caricamento della pagina.

Prima che inizi…

Controlla se le immagini sono davvero responsabili della bassa velocità di caricamento del tuo sito o se ci sono più problemi.
Utilizza Google PageSpeed ​​Insights per analizzare la velocità di caricamento del tuo sito.

Quindi, scorri verso il basso fino a " Diagnostica " e " Opportunità ".

Qui puoi analizzare in dettaglio OGNI parametro che influenza la tua velocità di caricamento e scoprire opportunità per migliorarla.

Il rapporto menziona anche problemi relativi all'immagine.

Questo è il modo più rapido per trovare e risolvere i problemi relativi alle immagini (e altri) che influiscono sulla velocità di caricamento del tuo sito.

MA c'è un problema: lo strumento può trovare tali problemi solo poche settimane dopo che hai inviato una pagina in diretta. E non è saggio aspettare perché la velocità di caricamento è un fattore di ranking di Google e le tue classifiche SERP potrebbero precipitare se la tua pagina si carica lentamente.

Quindi, perché non ottimizzare le immagini prima di caricarle? Dopotutto, prevenire è meglio che curare.

Queste tecniche ti diranno ESATTAMENTE come farlo. Cominciamo.

1. Scegli il formato immagine corretto

I proprietari di siti web preferiscono utilizzare questi quattro formati di immagine:

• JPEG (o JPG – Joint Photographic Experts Group)

È un formato di immagine compresso con una qualità leggermente ridotta. I JPEG sono più adatti per fotografie o immagini con molti dettagli e colori.

Immagine compressa = dimensioni file inferiori = velocità di caricamento più rapida

• PNG (grafica di rete portatile)

È un formato di immagine non compresso con una qualità superiore, adatto per immagini con sfondi trasparenti come loghi e meno colori.

I PNG sono disponibili in due formati:

• PNG-8

Ha una tavolozza limitata di 256 colori ma una dimensione del file ridotta che gli consente di caricarsi più velocemente.

• PNG-24

Non ha una tavolozza di colori limitata; quindi, è un file più pesante che richiede più tempo per essere caricato.

• GIF (formato di scambio grafico)

Le GIF utilizzano una tavolozza limitata di 256 colori garantendo al contempo una compressione senza perdita di dati. È più adatto per le immagini animate.

Le GIF richiedono tempo per essere caricate. Si consiglia di utilizzare immagini PNG-8 su GIF.

• SVG (grafica vettoriale scalabile)

JPEG, PNG e GIF sono elementi grafici raster (costituiti da pixel) e SVG sono elementi grafici vettoriali (costituiti da percorsi). Quindi, gli SVG non hanno bisogno di una richiesta HTTP per caricare un file immagine.

Tra questi, qual è il formato immagine giusto per il tuo sito web?

Dipende dal tuo scopo.

Statisticamente, PNG e JPEG sono i formati più popolari utilizzati dai siti Web. E sono la scelta ideale per via dell'equilibrio tra qualità dell'immagine e velocità di caricamento.

2. Ridimensiona le immagini prima di caricarle

Se carichi immagini senza alterarne le dimensioni, potrebbero avere dimensioni maggiori del necessario.

Affinché le tue immagini si adattino a dimensioni dello schermo di dimensioni diverse, il browser deve ridimensionare le tue immagini, il che richiede tempo e influisce sulla velocità di caricamento del tuo sito.

Il ridimensionamento prima del caricamento aiuta le tue immagini a rientrare nello spazio specificato sullo schermo e a caricarsi più velocemente sui browser.

Ora, la dimensione ottimale delle immagini varia da sito Web a sito Web. Dipende dal tema o dal design del tuo sito web.

Utilizzando gli strumenti di ispezione integrati della maggior parte dei browser, puoi determinare le dimensioni esatte delle immagini utilizzate sul tuo sito.

Se vuoi controllare la dimensione delle immagini utilizzate sul sito del tuo concorrente, puoi farlo allo stesso modo.

Basta ispezionare gli elementi di una pagina web, fare clic sull'immagine e il browser ti mostrerà la dimensione esatta dell'immagine.

Le dimensioni dell'immagine possono variare a seconda dello scopo, ad esempio un banner, un pop-up, un pulsante, ecc. Di seguito sono riportate alcune dimensioni delle immagini (in pixel) più diffuse utilizzate dalla maggior parte dei siti Web:

Puoi tenerli come riferimento per ridimensionare le immagini che carichi sul tuo sito web.

La larghezza e l'altezza dei post del blog o di altre immagini di contenuti interni non devono superare rispettivamente 1500 px e 1000 px.

Esistono diversi modi per ridimensionare le immagini in modo efficace:

• Utilizzo di Photoshop

Photoshop è un software di fotoritocco dedicato. Mantiene i dettagli e la nitidezza delle immagini durante il ridimensionamento.

Seleziona Immagine > Dimensione immagine . Apparirà una finestra di dialogo. Ti mostrerà la dimensione dell'immagine corrente.

Inserisci le dimensioni richieste (larghezza e altezza) per vedere la nuova dimensione del file immagine. Fare clic su OK e il ridimensionamento è terminato.

Puoi salvare il file nel formato desiderato e caricarlo sul tuo sito.

• Usando la vernice

Windows Paint è un'alternativa più semplice al ridimensionamento delle immagini prima di caricarle.

Apri l'immagine che desideri ridimensionare in Paint. Seleziona il ridimensionamento dalle opzioni nella barra degli strumenti.

Inserisci le nuove dimensioni secondo le tue esigenze. (Paint mantiene le proporzioni per impostazione predefinita.) Fare clic su OK e ridimensionare l'immagine.

Salva il tuo file in un formato appropriato e poi caricalo sul tuo sito.

• Utilizzo del plugin WordPress

Se stai utilizzando WordPress, puoi utilizzare un plug-in come Imsanity per ridimensionare le tue immagini.

Il plug-in ridimensionerà automaticamente un'immagine che supera i limiti di dimensione specificati dall'utente e la sostituirà con l'immagine caricata.

3. Comprimi TUTTE le immagini

La compressione riduce al minimo la dimensione del file in byte senza degradare la qualità delle immagini.

Aiuta ad accelerare la trasmissione delle immagini e a ridurre il loro spazio di archiviazione sui server.

Quindi, assicurati di comprimere ogni immagine prima di caricarla sul tuo sito.

Esistono due modi per ridurre le dimensioni del file dell'immagine:

• Perdita

La compressione con perdita riduce notevolmente le dimensioni del file. Alcuni dati sui pixel e metadati delle immagini come data, risoluzione, dimensioni, colore, dispositivo e così via vengono rimossi.

C'è una riduzione della qualità dell'immagine, ma l'occhio umano non distingue tra immagini non compresse e compresse.

• Senza perdita

La compressione lossless fornisce file di dimensioni relativamente maggiori. Non altera i dati dei pixel ma rimuove i dettagli nei metadati. Quindi, non c'è perdita di qualità dell'immagine.

Puoi anche selezionare il livello di compressione per le tue immagini.

Maggiore è il livello di compressione (o percentuale), minore è la qualità...

...e minore è la dimensione del file.

Ora ti starai chiedendo quando usare quale tipo di compressione.

Scegli la compressione lossless quando non puoi scendere a compromessi sulla qualità. È possibile selezionare il livello di compressione appropriato in base alle proprie esigenze. Funziona meglio per fotografie e immagini di siti Web.

Ma, se la qualità è di minore importanza, scegli la compressione con perdita. Puoi sempre usarlo per screenshot o immagini simili.

Ecco alcuni strumenti web che offrono un'efficiente compressione delle immagini:

• TinyPNG
• Kraken.io
• JPEGmini
• Ritaglio

Se stai usando WordPress, ecco alcuni popolari plugin per la compressione delle immagini:

• Smussato
• Ottimo
• Ottimizzatore di immagini EWWW
• TinyPNG
• Kraken.io

4. Usa CDN per immagini (e altri contenuti)

Una CDN è una rete di server geograficamente distribuita che consente una consegna più rapida dei contenuti sul Web. Migliora le prestazioni e la velocità dei siti Web, fornendo un'esperienza utente eccezionale.

L'utilizzo di una CDN per le tue immagini (e altri contenuti) velocizza il tuo sito in due modi.

Innanzitutto , le tue immagini sono ottimizzate (per impostazione predefinita) per occupare meno spazio sui server di archiviazione.

E in secondo luogo, le tue immagini sono archiviate su più server presenti in diverse posizioni geografiche.

Quindi, ogni volta che gli utenti visitano il tuo sito, non devono caricare file di immagine dal tuo server di origine. Invece, possono scaricarli dal server più vicino della tua CDN.

L'uso di un CDN aiuta a migliorare la velocità di caricamento della pagina perché la scienza limita ancora la velocità di trasferimento dei dati. La distanza tra il server di origine e la posizione dell'utente influisce sulla velocità di trasmissione dei dati.

Se un utente si trova lontano dal tuo server di origine, consumerà molto tempo per scaricare le immagini (e altri contenuti). E anche se il caricamento richiede alcuni secondi in più, gli utenti torneranno dal tuo sito.

Ma, con una CDN, gli utenti potranno scaricare le immagini dal server di rete più vicino. Sarà più veloce poiché la distanza tra il server di rete e la posizione dell'utente si riduce notevolmente.

Quindi, devi usare una CDN per le immagini.

Ci sono diversi CDN di qualità disponibili gratuitamente su Internet. Puoi usarne uno qualsiasi e ottenere un caricamento più rapido delle immagini.

Ecco alcuni CDN popolari ed efficienti per il tuo aiuto:

• CDN Cloudflare
• Amazon Cloud Front
• Google Cloud CDN
• Impera CDN
• CDN77.com
• Gumlet
• Velocemente
• CacheFly
• Software per vernici
• Bunny.net
• 5centscdn

5. Abilita la memorizzazione nella cache del browser

Ogni volta che gli utenti visitano il tuo sito, devono scaricare tutte le risorse del sito web come immagini, file HTML e CSS, file JavaScript, file multimediali, PDF, ecc. dal server.

Se abiliti la memorizzazione nella cache del browser, dici ai browser Web di scaricare e salvare le risorse del tuo sito nella memoria locale temporanea.

Puoi anche informare i browser web su:

• Le risorse che dovrebbero e non dovrebbero memorizzare nella cache.
• Il tempo per il quale devono mantenere una particolare risorsa memorizzata nella cache.

Pertanto, ogni volta che gli utenti visitano nuovamente il tuo sito, possono scaricare le risorse dalla memoria locale anziché dal server.

Pertanto, aiuterà le tue pagine web a caricarsi più velocemente per i visitatori abituali.

Guarda il miglioramento della velocità di caricamento della pagina facilmente ottenibile

con memorizzazione nella cache del browser:

È più di 100 volte più veloce.

La maggior parte degli strumenti di test della velocità della pagina suggerisce di "sfruttare la memorizzazione nella cache del browser" per lo stesso motivo.

Poiché le immagini impiegano il tempo massimo per essere caricate su un sito, l'abilitazione della memorizzazione nella cache delle immagini aumenta notevolmente la velocità di caricamento del tuo sito.

Puoi sfruttare la memorizzazione nella cache del browser per le immagini del tuo sito in due modi:

• Usando .htaccess

È il metodo più comunemente utilizzato per implementare la memorizzazione nella cache del browser. Puoi aggiungere alcune righe di codice di memorizzazione nella cache del browser al tuo file .htaccess per abilitarlo.

Nel codice, definisci il tipo di risorsa che deve essere memorizzata nella cache e la durata per la quale deve rimanere nella memoria locale. (secondo le tue esigenze)

È tutto pronto affinché le tue immagini (e altre risorse) vengano caricate più velocemente per gli utenti.

• Utilizzo dei plugin (per i siti WordPress)

I plugin automatizzano il processo aggiungendo il codice di memorizzazione nella cache del browser all'interno del file .htaccess. Ma potresti non trovare molte opzioni di personalizzazione con loro.

Ecco alcuni plugin per velocizzare il tuo sito WordPress abilitando la memorizzazione nella cache del browser:

• Cache totale W3
• La cache più veloce del WP
• WP Cloudflare Super Page Cache
• Supercache WP
• Ipercache
• Cassa della cometa

Con ciò, puoi ridurre considerevolmente il tempo di caricamento delle tue immagini.

Bonus: aggiungi testo alternativo alle tue immagini

Testo alternativo è una breve descrizione di un'immagine che indica chiaramente ciò che l'immagine mostra.

È importante per tre motivi:

• I browser visualizzano il testo alternativo al posto delle immagini se gli utenti utilizzano una connessione Internet a bassa velocità e le immagini richiedono tempo per essere caricate.
• Le utilità per la lettura dello schermo leggono ad alta voce il testo alternativo per far capire agli utenti ipovedenti di cosa tratta l'immagine.
• I motori di ricerca utilizzano il testo alternativo per comprendere meglio i contenuti di una pagina e classificarla in modo appropriato.

Ora, scrivere testo alternativo per le immagini è forse molto semplice. Devi pensare a come descriveresti un'immagine a tuo figlio e hai una fantastica descrizione alternativa in mano.
Ad esempio, il testo alternativo corretto per l'immagine riportata di seguito sarebbe: un gatto che salta in aria.

Descrive chiaramente l'immagine. Gli utenti possono farsi un'idea di cosa tratta l'immagine anche se non la vedono.

Quindi, devi aggiungere un testo alternativo a tutte le immagini che carichi sul tuo sito.

Ma se hai già caricato immagini, puoi trovare facilmente quelle senza testo alternativo utilizzando l'analizzatore di siti web gratuito.

Analizza tutte le immagini sul tuo sito e mostra il numero totale di immagini con un attributo alt mancante.
Quando fai clic su Visualizza altro , mostra gli URL delle immagini che devi correggere.

Puoi ottimizzare il testo alternativo di queste immagini e migliorare l'esperienza utente del tuo sito.

Inoltre, noterai che le tue immagini hanno prestazioni migliori nei risultati di ricerca di Google Immagini. Questo perché il testo alternativo è uno dei fattori di ranking SEO più importanti per le immagini.

Quindi, è una situazione vantaggiosa per te!

Migliora la velocità del tuo sito ottimizzando le immagini

Poiché l'utilizzo di Internet mobile continua a crescere, guarderemo avanti a siti ancora più veloci e fluidi.

Detto questo, lasciare le tue immagini non ottimizzate è un errore che non dovresti mai fare. Se la tua velocità è lenta, usa le tecniche di cui sopra per ottimizzare le tue immagini.

Quando testerai di nuovo il tuo sito con gli approfondimenti di Google PageSpeed, sono abbastanza sicuro che noterai un grande miglioramento nella sua velocità!

Hai messo in funzione una delle tecniche che ho menzionato? Quale pensi sia il più efficace? Fatemi sapere i vostri pensieri.