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


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. Come da immagine da esempio (fig.1) 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. (fig.2) 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.

Quindi: si apre photoshop, si va su file - script- elaboratore immagini, (fig.3) 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.(fig.4)

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.

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

E la qualità?

La qualità è rimasta buona, ecco Achille "ridotto" a una dimensione e a un peso sostenibiliAchille ridotto con photoshop

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

N.B
Il sito è sempre il solito casino, è lento, a volte si impalla, ma questo lo uso per gli esperimenti e il cazzeggio e non ho nessun interesse e neppure il tempo, di metterlo a posto.

Spero vi sia stato utile, sarà l'ennesimo tutorial sull'argomento, ma c'è, ed è già qualcosa.

S ci sono degli errori segnalatemeli, grazie.

cartella immagini

La cartella immagini (fig.1)

immagini dentro la cartella

Immagini dentro la cartella (fig.2)

schermata di photoshop

Schermata photoshop (fig.3)

selezione cartella

Selezione cartella (fig.4)

Cartella delle immagini ridotte

Risultato delle immagini ridotte (fig.5)


Lascia un commento

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

Un commento su “Tutorial: Ottimizzare le immagini per i siti internet con photoshop (o simili)