Skip links

Tutorial: come ottimizzare le immagini per il tuo sito web senza Photoshop

Author: Published on: Published in: Tutorial

“Mi raccomando, non caricare immagini troppo pesanti nel blog, che poi rallenti i tempi di caricamento del tuo sito!” Non si contano le volte che l’ho ripetuto ai miei clienti.

Credo che nessuno di voi abbia il desiderio di auto-sabotarsi, riducendo le prestazioni del proprio sito a causa di foto dalle dimensioni esorbitanti.

Uno dei motivi principali che fa si che sul sito vengano caricati file immagine molto pesanti è la pigrizia. E per questo purtroppo non ho una soluzione. 😉

Un espediente invece piĂš serio, che induce al caricamento di foto “ingombranti”, è che le modifiche di ottimizzazione della foto, spesso ne riducono la qualitĂ . Il che non è una brutta cosa fino a quando le immagini non diventano brutte e sgranate.

Ma non preoccuparti!
Ci sono diversi trucchi e plugin che ti permettono di ridurre la dimensione delle immagini, mantenendo comunque alta la qualitĂ  delle tue bellissime foto.
Nell’articolo che segue ti spiegherò in pochi semplici passaggi come rendere le tue immagini perfette per il web, senza renderle brutte!

Perchè dovresti formattare le immagini del tuo sito web

Secondo HTTP Archive, a partire da novembre 2018, le immagini rappresentano in media il 21% del peso totale di una pagina web. Quindi, se la tua intenzione è quella di ottimizzare il tuo sito web per migliorarne le prestazioni, le immagini sono sicuramente il primo elemento da cui partire.

Ecco in breve i motivi per cui dovresti subito ottimizzare le tue immagini:

  • MigliorerĂ  la velocitĂ  di caricamento del tuo sito, fattore che in primis incide sulle visite e la permanenza degli utenti sul tuo sito.
  • MigliorerĂ  il tuo punteggio SEO ed il tuo sito sarĂ  piĂš in alto nei risultati di ricerca. I file di grandi dimensioni rallentano il sito e i motori di ricerca odiano i siti lenti.
  • La creazione dei backup sarĂ  piĂš veloce.
  • Richiede minore spazio di archiviazione sul server.

Come SCEGLIere IL GIUSTO FORMATO PER LA FOTO da caricare sul tuo sito

Arrivati a questo punto, il tuo obiettivo è quello di trovare il giusto equilibrio tra il peso dell’immagine e la sua qualitĂ . Questo può essere fatto con uno strumento premium come Adobe Photoshop o con un tool gratuito come quello che ti consiglierò tra pochissimo.

Ad ogni modo, la prima cosa che devi fare è scegliere il formato corretto per la tua immagine. 👇🏻

I PRINCIPALI FORMATI PER LE IMMAGINI

Prima di iniziare a modificare le tue immagini, assicurati di aver scelto il tipo di file piĂš adatto tra i seguenti:

  • JPEG – Il formato JPEG è uno dei piĂš popolari per la grafica ed è utilizzato per l’archiviazione di immagini fisse e di altro tipo. La compressione del JPEG non è adatta per disegni, testo e icone grafiche. È il formato ideale per salvare le normali fotografie.
  • PNG – Il formato PNG consente di comprimere l’immagine senza perdita di qualitĂ . Una delle caratteristiche distintive del PNG è il suo supporto alla trasparenza. Questo formato è l’ideale per salvare loghi, testo, icone ed elementi grafici da caricare sul sito.
  • GIF – È la scelta migliore per le immagini animate. Il formato GIF usa solo compressione senza perdita di dati.

COME OTTIMIZZARE LE IMMAGINI DEL TUO SITO WEB SENZA PHOTOSHOP

Quando si pensa all’editing di foto il primo tool a cui si pensa è sicuramente Photoshop. In questa guida, voglio però consigliarti uno strumento gratuito, semplicissimo ed accessibile da chiunque direttamente online: BeFunky.
Di seguito ti riporto tutti i passaggi che devi compiere per salvare correttamente la tua immagine per il web.

1. RIDUCI LA DIMENSIONE DELLE IMMAGINI

Uno degli errori piÚ comuni in tema di immagini sui siti consiste nel credere che piÚ sono grandi le foto e migliore sia la resa. Non sempre è cosÏ! Le immagini si adattano alla dimensione massima dello schermo da cui vengono visualizzate. Ti consiglio quindi di ridimensionare le tue immagini per far si che non superino mai i 1920 px di larghezza (per le foto che devono essere visualizzate a tutto schermo).

Con BeFunky per ridimensionare la tua foto devi seguire questi semplici passaggi:

 

Come ridimensionare una foto senza Photoshop

  • Imposta come misura per la larghezza un valore massimo di 1920 px (se la tua foto andrĂ  mostrata a tutto schermo) o di 1280 px se la foto deve essere inserita per esempio all’interno di un articolo del blog. Verifica che la casella “blocca proporzioni” sia selezionata. E applica la modifica cliccando sulla “V”.

 

Come ridimensionare una foto senza Photoshop

2. SALVA L’IMMAGINE

Hai praticamente giĂ  finito, non ti resta che salvare l’immagine:

  • Clicca in alto al centro su “SALVA” > “COMPUTER”
  • Nel campo “nome file” inserisci il tuo nome e alcune parole chiave che descrivano l’immagine, separate da trattini.
    NB. Le foto non vanno mai rinominate a caso, il nome dell’immagine è importante per la SEO del tuo sito! (NO img1234.jpg –> SI maracuje-web-design.jpg).
  • Seleziona il formato piĂš adatto (solitamente va bene JPEG)
  • Regola la qualitĂ  dell’immagine per ridurne il peso. Valuta tu un giusto compromesso tra qualitĂ  e dimensione, il mio consiglio è quello di stare sui 70 e di non far pesare l’immagine piĂš di 300Kb.
  • La tua immagine è pronta per essere caricata sul tuo sito!

 

Come ridimensionare una foto senza Photoshop

I MIGLIORI PLUGIN WORDPRESS PER OTTIMIZZARE LE IMMAGINI

Nel caso in cui sul tuo sito siano giĂ  state caricate molte immagini non ottimizzate non ti abbattere: ci sono diversi plugin che ottimizzeranno automaticamente i file giĂ  presenti nel tuo database.
Qui ti fornisco una selezione dei migliori plugin per ottimizzare le immagini che sono giĂ  presenti nella sezione Media del tuo sito WordPress.
Ricorda però, questa non è una scorciatoia!
Mai caricare immagini da 2 MB nella libreria multimediale di WordPress, pensando che poi basti l’azione del plugin. Questo può portare ad esaurire rapidamente lo spazio sul disco del tuo host! Quindi mi raccomando, prima di caricare l’immagine sul sito ridimensionala sempre come ti ho spiegato qui sopra 😉

1. WP Smush

WP Smush è un’ottima soluzione per comprimere le foto del tuo sito WordPress. Questo plugin, che ha sia versione free che premium, elimina le informazioni nascoste dalle immagini per ridurre le dimensioni senza ridurre la qualitĂ . Smush dispone inoltre di un’opzione per impostare automaticamente larghezza e altezza di tutte le immagini, cosĂŹ tutte le tue immagini vengono ridimensionate in base alle stesse proporzioni.

 

2. Imagify Image Optimizer

Imagify ha una funzione di ottimizzazione in massa e permette di scegliere tra tre diversi livelli di compressione: normale, aggressiva e ultra. Ha anche una funzione di ripristino, quindi se non siete soddisfatti della qualità, potete ripristinare le immagini con un solo clic. Questo plugin ha una versione gratuita ed una versione a pagamento. Con l’account gratuito si ha il limite di 25 MB di immagini al mese.

3. Tiny PNG

TinyPNG utilizza i servizi TinyJPG e TinyPNG per ottimizzare le immagini JPG e PNG. Comprime in automatico le nuove immagini e comprime in massa le immagini già caricate sul sito. Converte CMYK in RBG per risparmiare spazio. Comprime le immagini JPEG fino al 60% e le immagini PNG fino all’80% senza una perdita visibile della qualità dell’immagine.

Per concludere

L’ottimizzazione delle immagini è un lavoro che richiede un po’ di pazienza rispetto al caricamento diretto dell’immagine, ma si tratta di un’operazione indispensabile, che devi sempre fare per il bene del tuo sito web.
Hai formattato le tue immagini per migliorare le prestazioni del tuo sito? Manualmente o con un plugin?
Se hai dubbi o se desiri che mi occupi io stessa dell’ottimizzazione delle tue foto non esitare a contattarmi.

Dai un'occhiata anche a questi articoli: