Quando arriva il venerdì sera, dopo l’aperitivo mi preparo lo zaino pensando all’uscita del sabato. Più o meno so cosa metterci ma ogni tanto mi faccio prendere la mano e carico la ventina, il binocolo, la macchina fotografica, gli snack e quando lo alzo pesa un quintale. Siccome me lo devo portare sulle spalle, mi guardo bene di lasciare a casa le cose inutili. Studio il mio trekking e poi scelgo cosa portare a seconda di meteo e dislivello in modo da non sovraccaricarmi.

Quando guardo un sito web penso allo zaino e a caricarlo bene fin da subito, è una filosofia adattabile a molto altro ma oggi mi concentrerò sulle tue foto.

Trovo sia fondamentale fare il punto su questo argomento soprattutto dopo che ho ricevuto da un cliente un messaggio che diceva “credevo lo facesse di default WordPress”. Ecco, no per cui se non lo fai di prassi incomincia fin da subito a inserire nelle tue abitudini anche l’ottimizzazione delle immagini prima di pubblicarle online.

Le due grandi famiglie di immagini: raster e vettoriali 

Per la stragrande maggioranza dei casi si pubblicano immagini raster, cioè composte da una griglia di numerosi pixel solitamente di forma quadrata.

Le estensioni che ritroviamo in questa categoria sono:

• raw: file nativo della macchina fotografica che contiene tutti i dati della foto (non va mai caricato online)
• jpg: file compresso con perdita di dati, per cui ogni volta che aprite e salvate i file perdete qualche pezzo
• png: file compresso ma senza perdita di dati. La differenza con jpg è che mantiene la trasparenza, utile per loghi o icone
• gif: utilizzate per i banner promozionali online e per i meme
• tiff: file utilizzato per la stampa, soprattutto per le scansioni ad alta qualità (non va mai caricato online)

Più di rado si usano immagini vettoriali che sono basate su equazioni matematiche che danno vita a forme. Questi file possono essere ingranditi e rimpiccioliti sempre senza perdere qualità. Le immagini vettoriali sono leggerissime e il web le digerisce molto bene, per questo sono preferibili a quelle raster.

Oltre all’estensione del file, per riconoscere se un immagine è vettoriale o raster, basterà ingrandirla al massimo e vedere se si notano pixel e aberrazioni cromatiche:

Le estensioni vettoriali in genere sono: AI (file nativo di Adobe Illustrator), SVG, EPS, PDF.

Attenzione a quest’ultimo, perché i file Adobe PDF sono sempre creati partendo da altri software, magari Word o Excel per cui è possibile che il vostro logo sia comunque un raster.

Se è sempre possibile convertire un file vettoriale in un file raster non è possibile il contrario. 

Ecco spiegato questo meme:

La risoluzione delle immagini corrisponde al numero di pixel per pollice (ppi)

Quando scatti una foto o la acquisisci/scarichi da una biblioteca online puoi esaminare alcuni dati: la dimensione dell’immagine in pixel, il metodo colore (RGB), la profondità colore (in genere 8 bit per canale) e la sua risoluzione.

Quando si parla di risoluzione si fa una grande confusione perciò arrivo dritta al punto: non esiste una regola da applicare perché il significato cambia a seconda di cosa parliamo. La risoluzione della tua immagine non interessa a WordPress perciò non fare affidamento alla risoluzione pixel/pollice per capire se la tua immagine è leggera.

Ecco un esempio di risoluzione 72ppi con la stessa immagine, dall’originale a quella ottimizzata.

Puoi notare come anche lo scatto originale sia a 72 ppi ma pesa 45,7 MB rispetto a quella ridimensionata a 1024px (lunghezza) che pesa comunque 2 MB. Per ridurre il peso della foto dovrò poi salvarla in jpg e impostare la compressione che voglio (80%).

Come ridurre le dimensioni di un immagine

L’ideale sarebbe conoscere le misure del tema WordPress, per questo potete chiedi al vostro web designer o cerca nella documentazione del tema. Principalmente le tue immagini potrebbero servire per uno slideshow o per un articolo del blog. 

Cerca di intuire le sue proporzioni perché se ha dei tagli particolari (tipo foto panoramica) sarebbe meglio tagliare la foto. Se la proporzione è la stessa, o molto simile, basterà ridurre i pixel utilizzando un software.

Mi raccomando di guardare i pixel originali, l’immagine non si può ingrandire per cui se è molto piccola dovrete cambiarla e non ridimensionarla.

Imposta 1024px o 1280px di larghezza (L). Una volta fatta questa operazione, potete comprimere il file ulteriormente durante il salvataggio in jpg del file. Il peso non sarà mai identico tra una foto e l’altra, cambierà a seconda di quanti colori ci sono all’interno del file.

Per evitare di vedere aberrazioni cromatiche su una fotografia, in fase di salvataggio comprimi fino all’80%, sei sempre in tempo se vedi che la tua immagine è ancora grande di comprimere una seconda volta.

Queste indicazioni sono generali e hanno lo scopo di indicarti un metodo per alleggerire le immagini del vostro sito e imparare a maneggiare un’immagine in modo funzionale e non solo estetico. 

Quali software utilizzare per ridimensionare e comprimere

Se vuoi qualcosa di basico il software Pixrl è personalmente il più completo anche se ti servisse fare qualche ritocco. Puoi installarlo nel tuo computer o utilizzarlo online, eventualmente ti consiglio di salvarlo nei preferiti.

Ridimensionare una foto con Pixrl

Dal pannello “ritaglia” cliccare sul menù seleziona aspetto > dimensione e scegliere il formato. Se vuoi pubblicare l’immagine su un output esterno (copertina Facebook, post Instagram etc) è possibile scegliere un predefinito. 

In fase di salvataggio questa è la schermata che vedrai su Pixrl ma sarà molto simile ad altri software: 

Sotto alla tipologia del file trovi anche il peso. 

Alla fine che peso ci vuole per un’immagine online? 

Il caricamento di una pagina è fortemente influenzato dal peso delle immagini, per cui elimina i file > 1MB nella libreria di WordPress, anche perché il motore di ricerca (Google) ti penalizza. 

Per controllare accedi alla libreria media e seleziona un immagine; troverai le informazioni di misura e peso in alto a destra: 

La cosa migliore sarebbe avere immagini con peso inferiore a 300 KB, a seconda di quanto schermo occupano. In generale le immagini più piccole per il blog o un prodotto possono pensare anche meno di 100 kb. 

Riassuntone

Il tuo sito è una piattaforma in continua evoluzione e ti vedo che alzi gli occhi mentre pensi che tanto tu pubblichi 5 volte all’anno. Salvati questo post o segnati queste cose:

• Verifica il formato della tua immagine e imposta le dimensioni a 1024px o 1280px di larghezza (L),
• Se hai un’immagine più piccola è meglio sceglierne un’altra perché ingrandirla mantenendo la qualità è più complesso e a volte semplicemente impossibile
• Puoi usare l’editor Pixrl sia scaricandolo sul computer che utilizzandolo online
• Salva il tuo file in formato png se c’è qualche trasparenza da mantenere oppure in jpg e in fase di salvataggio comprimi all’80%
• Controlla il peso, se la tua immagine è sotto i 300 KB puoi caricarla nella libreria di WordPress.

Accogliere questa prassi è un modo per mantenere in salute il sito ed evitare spiacevoli malfunzionamenti in futuro.

Spero che questo riassuntone sia servito a migliorare il tuo approccio alle immagini e a salvare qualche sito da spiacevoli interruzioni di servizio.