Ottimizzazione delle immagini per il web: la mia nuova battaglia personale.
Basta con i siti che impiegano una vita a caricarsi e pesano più del Paradiso perduto di Milton!

Sabato 24 ottobre si è svolto a Torino il secondo Freelance Day organizzato da Toolbox.
Lo stesso Toolbox che è anche sponsor e (bellissima) location per i nostri mensili WordPress Meetup.
Tra i molti ed interessanti speech previsti in quella giornata spuntava anche un workshop chiamato WordPress 101, lo starter kit per farti il sito i cui relatori eravamo proprio noi, gli organizzatori del WP Meetup.
Io, emozionata oltre misura all’idea di dover parlare in pubblico, ho introdotto i freelance presenti all’uso di WordPress e, fra le altre cose, ho toccato un argomento che mi sta molto a cuore e sul quale ormai combatto una mia personale battaglia: L’OTTIMIZZAZIONE DELLE IMMAGINI PER IL WEB!

Lo ammetto, non ne posso più di vedere siti pesantissimi, che superano talvolta anche i 5GB di spazio web, perché carichi di fotografie PESANTI.
Le immagini, prima di essere caricate sul vostro sito o blog devono essere OTTIMIZZATE ovvero rese più leggere e idonee all’upload.

Perché ottimizzare le immagini per il web?

La risposta è semplice: per renderle meno pesanti e quindi per non sovraccaricare il vostro sito. Questo vi permetterà di avere un sito snello e veloce nel caricamento. Basta con i siti che impiegano anche 13 secondi (!!!) per caricare la loro homepage. Basta con le immagini da 3MB caricate nella vostra libreria media.
Non vi basta come spiegazione? Allora sappiate che lo spazio web su cui appoggiate il vostro sito lo pagate. Se riuscite a non superare i 5GB (per esempio!) risparmierete.
Inoltre la velocità di caricamento della homepage di un sito non solo influenza il lettore che, se deve aspettare troppo, si annoia e vi abbandona, ma è un fattore di cui tiene conto anche Google per indicizzarvi. Quindi non avete più scuse, ottimizzate queste immagini. Ora vi spiego come fare.

Come ottimizzare un’immagine per il web

Tre semplici regole vi aiuteranno ad ottenere immagini leggere e scattanti.

• RISOLUZIONE: si esprime in PPI ovvero “pixel per inch” (pixel per pollice lineare) e indica quanti pixel devono starci in una linea lunga un pollice. Più pixel sono presenti più la risoluzione è alta. Per pubblicare sul web impostate serenamente la risoluzione a 72 ppi. Una fotografia a 300 ppi ha una risoluzione altissima che può essere apprezzata solo in stampa. Ma sul web non si vede la differenza in termini di qualità: sarebbe solo un inutile peso!
• DIMENSIONE: è espressa dal numero di pixel della base per il numero di pixel dell’altezza della fotografia. Salvo casi particolari (immagini di sfondo del sito, immagini fullwidth ecc…) nelle pagine e nei post del vostro sito pubblicate immagini il cui lato maggiore sia al massimo 1200px. Non serve davvero a nulla caricare immagini da 3000px, se non ad appesantire – ancora – il sito. Siete curiosi? I fotografi che consegnano le loro foto per essere viste su dispositivi full HD le ridimensionano a 1980px. Quindi non esagerate, le dimensioni (in eccesso) non contano!
• COMPRESSIONE: senza entrare troppo nella palude dell’entropia o della matrice, vi basti sapere che ogni immagine può essere compressa in modo che occupi meno spazio. JPEG e PNG, per esempio, sono formati compressi di immagine. Ma tutte le immagini possono essere ulteriormente compresse. Se state lavorando su una fotografia non comprimete più dell’80% (intorno al 76% di compressione appaiono le prime aberrazioni), se invece state creando una grafica con un semplice sfondo colorato, una cornicetta e una scritta (vanno molto di moda!) potete comprimere anche fino al 70%. Vedrete come diminuisce il peso della vostra immagine.

Quali programmi usare per ottimizzare le immagini per il web?

Semplice: quello con cui vi trovate meglio e con cui normalmente lavorate le vostre fotografie. Praticamente tutti i software di post produzione e grafica prevedono l’ottimizzazione per il web. A partire dai più professionali come Photoshop o Lightroom per arrivare a Gimp e tanti altri.
Per chi utilizza i sistemi Mac consiglio la leggerissima e super intuitiva app Pixer: trascinate sulla sua icona una qualunque immagine e digitate la dimensione che volete raggiungere (massimo 1200px, ve lo ricordate?). L’app – italiana al 100% – vi salverà un’immagine già ottimizzata per il web. Smart & quick.
Per chi invece lavora su Windows e desidera un programmino semplice semplice per l’ottimizzazione consiglio FastTone Photo Resizer. Un ottimo tool che oltre ad ottimizzare le immagini per il web vi permette anche di inserire watermark sulle vostre foto (ma usateli con moderazione!).

Tutto chiaro?
Ora ripetete con me: caricare immagini da 3MB (ma anche da 900KB…) su un sito non è funzionale. Ottimizziamo le fotografie e le grafiche prima di lanciarle nel web, così da mantenere in forma il nostro sito, senza rallentarlo.