Tutorial: Ottimizzare le immagini per i siti internet con photoshop (o simili)

Achille

Ottimizzare le immagini per i siti internet non è solo un vezzo, ma una cosa importante e dovrebbe essere alla base di un qualsiasi progetto web.

Un po’ di nozioni di base

Internet si è voluto, la stessa banda che supporta internet, negli anni si è evoluta, passando dai mitici modem a 56k agli attuali sistemi su fibra che permettono di raggiungere velocità di download di 100mb/s. Una velocità che ha permesso di passare dai primi siti “tutto testo” agli attuali,  molto più performanti, pieni di funzioni, di js, e di immagini. Immagini appunto, che occupano una buona parte della banda in download.

Perché anche le immagini contribuiscono a consumare dati. 

Se da un lato la possibilità di scaricare dati con la fibra è aumentata, dall’altra i nuovi device mobili, quali smartphone e tablet, hanno ancora dei problemi. Non tanto per la velocità di download ma quanto per la quantità di dati che l’utente che li usa ha a disposizione, quantità che spesso non è infinita.

Ecco perchè l’ottimizzazione delle immagini è fondamentale!

Iniziamo a ottimizzare le immagini

Un’immagine scattata con una normale reflex ha un peso di qualche MB. Cartella Immagini
Come da immagine da esempio  una cartella con una quarantina di immagini, scattate in .jpeg, pesa già 300 MB (occhio alla differenza tra MegaBite e Megabit). Se andiamo a vedere dentro la cartella scopriamo che una immagine pesa mediamente 6,5 MB.

gatto anteprima

Un po’ troppo per caricarla tal quale su un sito.

Ecco che dobbiamo ridurla cercando di perdere meno qualità possibile, ma come? Semplicemente e velocemente usando una funzione di photoshop molto interessante: l’elaboratore di immagini.

elaboratore immagini

Quindi: si apre photoshop, si va su file – script- elaboratore immagini,  si cerca la cartella dove sono presenti le immagini da ridurre e si decide quanto ridurle. Per esperienza uso una riduzione della qualità mettendola  a 5 su una scala da 1 a 12 e la dimensione a 1400 px.

seleziona cartella immagini

Si lancia il programma e si aspetta qualche secondo (o minuto, a seconda della potenza del PC e delle immagini da elaborare). Una volta finito, se si è impostato tutto giusto, si avrà una cartella dove verranno salvate le immagini (io personalmente ho impostato che vengano salvate in una cartella all’interno della cartella che contiene le immagini) che saranno una copia ridotta delle stesse.

immagini ridotte cartella

La cartella pesa adesso solo 4 MB,  il che vuol dire che le immagini pesano solamente circa 100 KB l’una, una riduzione non da poco.

E la qualità?

AchilleLa qualità è rimasta buona, ecco Achille “ridotto” a una dimensione e a un peso sostenibili

Siamo passati dai 7,00 MB dell’originale ai 118 di quella ridotta

Lascia un commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Su di me

Genovese di origine, trasferito in Riviera, da sempre appassionato di tecnologia comincio nel 2003 a smanettare su internet per poi fare della passione un lavoro.

Articoli recenti

tapulli checkout field

Tapulli Checkout Field

Per un progetto un po’ particolare mi serviva un semplice sistema per nascondere alcuni campi di checkout di Woocommerce. Niente di particolare, ma per Woocommerce

Leggi Tutto »