Come ridimensionare foto e immagini per il tuo blog

Ridimensionare foto e immagini per il tuo blog significa fare la differenza in termini di posizionamento ed esperienza utente. Ed entrambi sono parametri vitali per la sopravvivenza del tuo progetto.

Purtroppo sono fin troppi gli esempi di blog mediocri dove le immagini vengono gestite con troppa leggerezza. E’ un errore clamoroso che danneggia in modo violento il tuo progetto.

Quali siano i problemi reali di una sbagliata ottimizzazione delle immagini del blog? Come risolverli? Vediamolo assieme.

Perchè ridimensionare foto e immagini?

Tre secondi. E’ questo il tempo di attesa medio dopo il quale il tipico internauta si stanca e chiude il sito. La velocità di caricamento di un sito web è uno dei parametri davvero importanti nelle strategie di posizionamento sui motori di ricerca.

E la velocità di caricamento dipende in larga misura da foto e immagini.

Sto lavorando con una ragazza che ha da poco aperto il suo nuovo blog, e dai primi controlli ho subito visto foto enormi e tempi di caricamento assurdi. Così le ho fatto la domanda diretta “Scusa mi dici esattamente come sei riuscita a creare questa pagina?”

In termini di megabyte una pagina pesava quanto 20 delle mie…

Purtroppo, con il solito candore di chi ignora certe regole basilari, mi ha detto: “Prendo il cellulare, esco, faccio una bella foto. Torno a casa, la esporto su windows e la trascino su WordPress.

Immagini a dover caricare un sito simile da cellulare? Oggettivamente, chi è disposto ad aspettare decine di secondi per vedere un sito? Io no. Tu, nemmeno.

Ecco, se non capisci come ottimizzare e ridimensionare foto e immagini crei questo tipo di danno: pesantezza del sito, tempi di attesa, esperienza utente pessima.

Non puoi usare le immagini così come sono. Oggi un semplice cellulare è capace di scattare foto in alta definizione. Ridimensionare le foto per il web significa migliorare ogni aspetto delle tue attività, dal blog, alle condivisioni social etc. Ma andiamo con ordine.

Quali sono le tipologie di file per le immagini?

Le tre tipologie di file immagine più comuni per il web sono JPEG, PNG e GIF. Esse rappresentano in pratica il modo con cui le immagini stesse vengono salvate su file. Ogni tipologia presenta vantaggi e svantaggi, che possiamo semplificare in questo modo:

Il formato PNG

Il formato PNG preserva la qualità dell’immagine originale e permette gli sfondi trasparenti. E’ adatto principalmente a lavorare con colori piatti, quindi è l’ottimale per ridimensionare immagini web come loghi, disegni, illustrazioni e testo grafico.

È possibile avere file .png con diverso numero di colori. Così è facile capire che un disegno in bianco e nero, memorizzato con 2 colori, occuperà meno spazio di un disegno vettoriale memorizzato con 128 o 256 colori.

Ridimensionare un’immagine tenendo ottimizzando il numero dei colori permette di ottenere risultati notevoli. Se hai un blog o un sito web che usa soprattutto schemi e disegni (o immagini flat anche per l’immagine in evidenza dei post) il .png sarà il tuo più fedele alleato per ridimensionare immagini in modo super efficace.

Il formato JPEG

Il formato .jpg è invece dedicato alle foto. Riesce ad eseguire forti ottimizzazioni sulla dimensione poichè va ad intervenire sulle sfumature di colore, togliendo informazioni (più che altro sfumature) che, tuttavia, non sono percepite dall’occhio umano (Perlomeno in un ambiente web o su dispositivi informatici).

La qualità di ottimizzazione del formato .jpg viene definita compressione, e sta a te trovare un giusto equilibrio tra qualità e dimensione quando vai a ridimensionare la foto.

Suggerimento: il protocollo di memorizzazione .jpg agisce sulle sfumature di colore. Quindi più avrai un’immagine netta, con disegni, dettagli, particolari, e più l’effetto finale perderà in qualità. Sarai costretto a mantenere un indice di compressione molto leggero e la conseguenza sarà un’immagine enorme. Per ottenere il massimo quando ridimensioni la foto, prova a scegliere quelle dove il soggetto a fuoco è più piccolo dell’intera foto. In questo caso, con uno sfondo leggero e già sfocato in partenza otterrai il massimo rapporto tra dimensioni e qualità

Il formato GIF

Il formato GIF è molto simile al PNG. Solitamente viene utilizzato per avere immagini animate. Per la singola immagine ti consiglio di rimanere sul più ottimizzato PNG.

WordPress e il problema del ridimensionamento delle immagini

Quando crei un blog in WordPress, devi avere ben chiaro come funzionino in generale le immagini. WordPress ha una sezione, chiamata Media, dove puoi aggiungere immagini e file da utilizzare all’interno del tuo progetto web.

Ogni volta che carichi una singola immagine, WordPress la scrive in una cartella specifica chiamata Uploads senza modificarla (quindi la lascia esattamente della stessa risoluzione con cui l’hai caricata). Tuttavia il processo non finisce qui.

WordPress andrà infatti creare e ridimensionare tante altre immagini aggiuntive, una per ogni formato specifico del tema (potrebbero essere anche decine). Così avrai immagini di tante dimensioni pronte per essere utilizzate nella barra laterale, o nel footer, o in tante zone diverse a seconda di come configurerai il tuo blog o il tuo sito.

Ridimensionare la foto di partenza

Purtroppo. se l’immagine di partenza è comunque esagerata, i processi “basilari” di ridimensionamento non riusciranno a rimpicciolirla più di tanto. Per questo motivo, l’immagine originale dovrebbe essere caricata già ottimizzata. Inoltre è molto facile (soprattutto se non sei pratico di html e ottimizzazioni spinte) cadere nella trappola di non puntare alla foto giusta e quindi di usare nel sito l’immagine di base (la più grande).

Mi spiego meglio: vuoi caricare l’immagine del tuo viso per il blog per fare l’angolo autore nella sidebar. Sbagliando utilizzi un’immagine del peso di 3 mega (Magari in alta risoluzione a 300 dpi, tipico delle macchine fotografiche). Poi crei un widget di testo per mostrarla nella barra laterale, una cosa tipo:

<a href="http://www.mioblog.it/chi-sono/">
<img src="http://www.mioblog.it/viso.jpg" />
</a>

Così ottieni che chi clicca sul tuo viso andrà a finire nella pagina chi-sono. Tutto ok tranne un particolare: stai dicendo a WordPress di utilizzare l’immagine originale. Questo significa che ogni persona che caricherà il tuo blog o qualsiasi articolo si troverà a dover caricare “altri 3 mega aggiuntivi”.

È il modo migliore per rendere il tuo blog lentissimo.

Quando parti con un’immagine da 1024 a 72dpi generalmente hai coperto il 99,99% delle esigenze di qualsiasi blog. Nel caso serva più piccola sarà WordPress ad occuparsene ridimensionandola di conseguenza. Se invece dovessi usarla in modo nativo, beh… Costringerai l’utente a caricare comunque un’immagine normale.

Come consiglio generico evita di caricare immagini di dimensioni enormi e con densità maggiore di 72DPI. Controlla prima di caricarle e fai in modo che ogni singola immagine non superi di norma i 90-100Kb di dimensioni.

Strumenti adatti a ridimensionare foto e immagini

E se ridimensionare foto e immagini ti sembra un delirio, vediamo qualche strumento per rendere tutto più semplice.

Photoshop è senz’altro una delle scelte migliori, soprattutto per i suo sofisticati algoritmi di compressione “loseless” (Ovvero senza perdita di qualità). Ma photoshop costa soldi, ed è tutt’altro che facile.

Quindi? Alternative? Con Windows anche Paint potrebbe andare bene. Ma se vuoi qualcosa di più integrato, magari in WordPress, ti suggerisco di dare un’occhiata a questi plugin:

Imsanity

Imsanity è un plugin che più che ottimizzare semplicemente ridimensiona le immagini.

Una volta configurato con le dimensioni massime, prende qualsiasi cosa tu stia caricando e la riporta “a più miti consigli”. In pratica ridimensiona le immagini troppo grosse al limite massimo stabilito. Comodissimo e usa gli standard di WordPress.

ImageAlpha e ImageOptin

Questo sono due strumenti per desktop, che riducono e ottimizzano le immagini (in particolare png). La compressione è praticamente senza perdita di qualità, mentre le dimensioni vengono ridotte, rispetto a png full color, anche di 10 volte.

Due software davvero efficaci, attualmente solo per Mac e Linux, che raggiungono risultati superiori anche grazie alla rimozione di tutti i metadata aggiuntivi. In pratica tolgono informazioni dal file, che non servono e occupano solo spazio.

JPEGmini

Disponibile per Mac e Windows, questo tool è dedicato ai JPEG, e permette di ottenere compressioni altissime (fino all’80%) senza perdita di qualità.

C’è un freeTrial per provarlo, tuttavia è un software premium e costa 19,99 dollari. Nulla, se paragonato agli effettivi vantaggi che offre.

TinyPNG

Questo ultimo tool che segnalo è davvero completo e integrato dentro WordPress. Permette di ridimensionare foto e immagini (impostando i valori massimi consentiti tipo Imsanity) e non solo: ottimizza in modo completo sia i PNG che i JPG senza perdita di qualità.

È free per un numero minimo di immagini, a pagamento per volumi più consistenti. Da provare.

Nota bene: come ho detto sopra, un’immagine caricata in WordPress si trasforma in “n” immagini a seconda delle impostazioni del tema. Quindi è facile uscire dai limiti e iniziare a pagare. Tienine conto anche se i costi non mi sembrano così alti.

Conclusioni: ridimensiona foto e immagini per avere un blog veloce e bello.

Abbiamo già visto dove trovare immagini per il tuo blog, ora hai un panorama completo su come fare per ridimensionarle e ottimizzarle..

Ti ricordo che le immagini sono una parte fondamentale della tua comunicazioni e possono rendere il tuo blog magnifico oppure scialbo.

Scegli attentamente, ridimensiona la foto o l’immagine che rappresenta ogni tuo articolo e ottimizzala per ridurla in dimensione senza perdere qualità, i tuoi lettori ti ringrazieranno e Google (che non fa mai male) ti premierà.

E tu? Usi altri tipi di strumenti? Come fai di solito per ottimizzare le immagini?