Come ottimizzare le immagini del tuo sito web in 4 semplici passi?

Nel mondo digitale essere veloci vuol dire avere più successo. Un sito web veloce significa più visualizzazioni, più condivisioni e anche più guadagni. Questo bisogno di velocità può andare in conflitto con il tuo desiderio di avere un sito web bello visivamente.

D’altronde cos’è un sito web senza immagini? Le immagini danno carattere a un sito e invogliano maggiormente gli utenti a navigarlo. Se poi il tuo sito web parla di fotografia le immagini sono la cosa più importante.

Per fare un buon lavoro dovresti capire come ottimizzare le immagini, altrimenti potrebbe essere penalizzata la velocità di caricamento.

In questo articolo andremo a spiegarti perché è importante ottimizzare le immagini e capirai come migliorarle in 4 semplici passi, quasi senza perdere qualità. La velocità di caricamento del sito e l’esperienza dei tuoi utenti ne avranno un grande giovamento.

1. Perché devi ottimizzare le immagini?

Riducendo le dimensioni delle tue immagini aumenterà la velocità di caricamento del tuo sito, è naturale. Quello che in molti non sanno è che ridurre i tempi di caricamento porta tantissimi altri benefici.

Il più importante è che Google prende in considerazione la velocità con la quale si carica il tuo sito per il posizionamento nelle pagine di ricerca. Le immagini aggiungono secondi preziosi al tempo di caricamento delle tue pagine o articoli.

Google dice che “le immagini sono le risorse più scaricate su un sito web” e occupano gran parte dello spazio visivo. Se il tuo sito parla di fotografia allora di sicuro avrà più immagini di un sito web normale; dovrai fare molta attenzione altrimenti la tua velocità di caricamento continuerà a peggiorare. Quindi?

È proprio qui che entra in gioco la ricerca sulla velocità di caricamento. La cosa più importante da sapere è che i tempi lunghi di caricamento danneggiano il tuo business.

Questa info grafica di KissMetrics spiega perché è importante la velocità di caricamento.

La cosa più importante da tenere presente è che per ogni secondo di ritardo nel caricamento ci sarà una diminuzione del tasso di conversione di circa il 7%.

Prendendo questi numeri come indicativi, ipotizziamo che ogni mese tu abbia un guadagno di 3000 Euro dal tuo sito web; quindi ogni mese perdi circa 210 Euro per ogni secondo di ritardo.

Facendo un po’ di conti ogni anno perdi circa 2500 Euro. Questo ovviamente se contiamo solo 1 secondo di ritardo.

Pensa a quante cose potresti fare con 2500 Euro ogni anno. Pensa quanto puoi incrementare i tuoi guadagni migliorando la velocità di caricamento.

La velocità di caricamento è importante anche se non guadagni soldi dal tuo sito ma vuoi semplicemente aumentare il tuo traffico o creare la tua audience. Per esempio avere un sito web lento porta a meno condivisioni e visite che si ripetono. È un fatto provato che se il tuo sito web si carica in più di 3 secondi il 40% delle persone lo abbandonano.

Google ha fatto un esperimento per valutare l’impatto della velocità di caricamento. Dopo che un bel po’ di utenti hanno detto che vogliono 30 risultati per pagina di ricerca e non più 10 come era impostato di solito, Google ha provato a cambiare il numero di risultati su un paio di pagine.

Quello che hanno scoperto è che aggiungendo più risultati aumentava il tempo di caricamento di circa mezzo secondo; quel mezzo secondo in più diminuiva la quantità di traffico del 20%.

Arrivati a questo punto la domanda che viene spontanea è: “Come può evitare un fotografo tutti questi problemi legati alle immagini?” Ci sono 4 semplici passi per ottimizzare le immagini di un sito web senza avere grandi perdite. Continua a leggere per scoprirli.

2. Ritaglia le tue immagini

Il primo passo è semplice, devi ritagliare le tue immagini. Perché? Eccoti due motivi:

  1. Una questione estetica;
  2. Dimensioni inferiori del file immagine.

Il primo è abbastanza ovvio e ci sono vari modi in cui puoi ritagliare le immagini per stimolare l’impatto visivo. L’attrazione estetica è solo un bonus.

L’impatto maggiore arriva dalla riduzione della dimensione del file. Sia che rimuovi intere sezioni di un’immagine o soltanto qualche pixel sulla destra o sulla sinistra quello che in realtà stai facendo è diminuire la dimensione del file perché hai rimosso una parte dei dati che vengono trasferiti nel caricamento della pagina.

3. Scegli il formato giusto

Una volta che hai ritagliato un’immagine, il primo passo per una giusta ottimizzazione è di scegliere il formato giusto (jpg, jpeg, png, svg, gif, etc) per la tua nuova immagine.

Ecco i più importanti:

JPEG

Questo formato file è stato creato apposta per poter comprimere le immagini, in particolare le immagini con molti dettagli. È la migliore scelta per i fotografi. Il formato JPEG ha la compressione lossy che significa perdita di un po’ di qualità nel processo di compressione. Per un fotografo comune è più che sufficiente.

GIF

Anche se e uno dei più vecchi formati in uso, il GIF è ancora molto utile.

Sopporta solo 256 colori e non bisogna dunque mai utilizzarlo per illustrazioni, pitture o fotografia. La cosa positiva è che nel formato GIF le immagini possono avere sfondo trasparente. Un’altra cosa positiva è che possono essere animate.

Essendo immagini di dimensioni ridotte ti consiglio di considerare il formato GIF per immagini semplici o con animazioni.

PNG

Come i GIF anche i file PNG sopportano gli sfondi trasparenti ma a differenza dei primi sono completamente “lossless” e possono incorporare un grande numero di colori. Non è consigliato salvare una fotografia in formato PNG  e se hai immagini con testi e grosse aree con lo stesso colore devi valutare bene la tua scelta.

SVG

L’acronimo di questo formato sta per Scalable Vector Graphics. Il formato SVG usa linguaggio markup per generare immagini che possono scalare a qualsiasi dimensione. Il formato SVG è fantastico per grafiche in 2 dimensioni e migliorerà di tantissimo la velocità di caricamento del tuo sito web. Questo formato di file è ancora abbastanza nuovo e non tutti i browser lo sopportano.

4. Scegli un buon programma per ottimizzare le immagini

TinyPNG è il mio tool preferito per la compressione di immagini.

Prendere decisioni per il ritaglio e il tipo di file può essere stancante. Per fortuna uno dei migliori modi in cui puoi diminuire le dimensioni delle immagini richiede pochissime decisioni da parte tua. I programmi per l’ottimizzazione fanno il lavoro sporco al posto tuo. Ecco una piccola lista dei migliori:

  • TinyPNG: questo programma è una web-app che diminuisce il numero di colori delle tue PNG così da diminuire la dimensione senza grandi perdite di qualità.
  • JPEGmini: dietro questo programma c’è una tecnologia in attesa del patent che riduce il più possibile la dimensione senza grande impatto sulla qualità. Puoi utilizzare la versione trial o pagare per utilizzarlo sempre.
  • RIOT: Radical Image Optimization Tool (che puoi scaricare gratuitamente) usa varie tecniche per diminuire le dimensioni delle tue immagini. Il programma è molto bello anche perchè ti fa vedere le 2 immagini affiancate, cioè vedi a destra l’immagine originale e a sinistra l’immagine ottimizzata.
  • ImageOptin: questa è una app gratuita per Mac che usa varie tecniche per ottimizzare le dimensioni delle immagini preservandone la qualità il più possibile.

A parte applicazioni per i PC e Mac, WordPress offre una varietà di plugin che ti aiutano ad avere gli stessi risultati in modo abbastanza facile. Ecco i miei preferiti:

  1. EWWW Image Optimizer
  2. TinyPNG for WordPress
  3. WP Smush.it

5. Crea le miniature

Le miniature sono un ottimo modo per bilanciare il compromesso tra file di piccole o grandi dimensioni e immagini ad alta risoluzione. Come parte delle sue funzionalità predefinite WordPress offre un’opzione per le miniature; genera una piccola (sia in termini di dimensioni fisiche che di dimensione file) anteprima dell’immagine.

Queste miniature possono migliorare di tantissimo il tempo di caricamento delle tue pagine. Il problema con le immagini piccole è che non puoi mostrarne i dettagli o i bellissimi colori.

Per fortuna WordPress ci permette di risolvere il problema in maniera facile e veloce. Quando aggiungi una miniatura su una pagina o un articolo puoi aggiungere un link diretto al file media, andando alla sezione dedicata e scegliendo di linkare al file media. I visitatori potranno fare click sulla miniatura per aprire l’immagine nella sua dimensione originale.

Conclusione

La velocità di caricamento è fondamentale. 

Per questo uno dei punti più importanti è ottimizzare le immagini prima di caricarle online.

E tu quali programmi e strumenti usi per ottimizzare le tue immagini? Lascia un commento qui sotto e fammi sapere. Inoltre se hai domande a riguardo usa sempre la sezione commenti e io ti risponderemo il prima possibile.

Ho inoltre messo in piedi un gruppo gratuito su Facebook per tutti gli utilizzatori di WordPress, il gruppo e aperto a tutti quanti e dentro puoi fare domande, chiedere aiuto e sopratutto confrontarti con veri professionisti che usano WordPress per tutti i loro progetti online. Il gruppo si chiama Utilizzatori WordPress e lo puoi trovare qui.

Se ti sei appena iscritto al nostro gruppo facci un saluto! Non mordiamo sai.

Hai trovato utile questo articolo? 

Fallo sapere a tutti a quanti lasciando una tua valutazione (da 1 a 5 stele) qui sotto. A te non costa nulla ma per me significa tantissimo, sopratutto se il tuo sarà un voto a 5 stele.

Come ottimizzare le immagini del tuo sito web in 4 semplici passi?
Media 5 su 10 voti

Condividi questo articolo sui social.

Condividi su facebook
Facebook
Condividi su google
Google+
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn
Madalin

Madalin

Ciao, sono Madalin e sono la persona dietro a tuttowp.it. Ho scoperto WordPress circa 10 anni fa e da quel momento non l'ho più abbandonato. Sul blog di tuttowp.it andrò a parlare di moltissimi argomenti che riguardano WordPress. Una volta finiti li argomenti tecnici inizierò a parlare di argomenti che ti aiuteranno a sfruttare al meglio il tuo blog, sito web o negozio realizzato con WordPress.

Altri articoli dal nostro blog

Hai qualche domande o qualcosa da aggiungere? Fammelo sapere con un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.