tutorial su adobe photoshop

In uno dei primi articoli scritti su Space Web Design parlavo proprio di velocizzare il proprio sito web, suggerendoti alcuni semplici trucchetti per guadagnare qualche punto in termini di velocità.

Oggi voglio condividere con te le tecniche che utilizzo per ottimizzare al meglio le immagini, riducendone la dimensione, mantenendo la qualità, sia che l’immagine sia un png o jpg, il tutto utilizzando Adobe Photoshop.

Prima di iniziare

Prima di iniziare ad ottimizzare l’immagine state attenti che i dpi (Dots per inch) siano 72 o se proprio volete esagerare 96, non oltre altrimenti l’immagine diverrebbe troppo pesante da gestire anche ottimizzata. Per modificare i dpi basterà cliccare su immagine > dimensione immagine e nella casellina dove leggete risoluzione cambiare il parametro con 72 o 96.

Inoltre state attenti che il profilo di colore sia RGB e non CMYK, photoshop ti permette di convertire al volo questa caratteristica cliccando su immagine > metodo > colore RGB.

Alleggerire immagini png

I file in formato png hanno la peculiarità di possedere oltre ai classici canali RGB un quarto canale denominato alpha, che agisce sull’opacità/trasparenza dei layer delle immagini. Questa caratteristica li rende più pesanti ad altri formati come ad esempio il jpg, ma li rende estramamente utili quando si realizzano template e layout di siti web, infatti se venisse impiegato un jpg sopra un background rosso avremmo un risultato a dir poco scadente, come quelle dell’immagine qui sotto.

immagini con sfondo bianco su background colorati

Step 1: Apri photoshop

Per correttezza io lo dico, non si sa mai…

Step 2: Salva l’immagine per il web

Una volta aperta l’immagine che desideri alleggerire, procedi al salvataggio per il web (File > Salva per Web o Ctrl+Shift+Alt+S), ti si aprirà una dialog box come quella nell’immagine qui sotto

salvataggio per web su photoshop

Come puoi vedere, l’immagine pesa la modica cifra di 2.199M un po’ troppo per quello che ti serve, comincia quindi a smanettare con la parte destra della finestrella, settando i parametri in modo da ottenere il risultato più soddisfacente.

Step 3: ottenere il risultato più soddisfacente

parametri photoshop per alleggerire immagini

Come scrivevo all’inizio dell’articolo i png vengono resi pesanti sopratutto dalla trasparenza, ma questa particolarità ci serve, per cui dovrai sacrificare altri aspetti che non vadano ad intaccare troppo il risultato finale, ad esempio l’immagine del tutorial è un pokemon che non vanta una gran quantità di colori, quindi posso utilizzare l’opzione png-8, particolarmente utile per le immagini senza tante cromature o sfumature.

Se oltre alle cromature e alle sfumature, ci sono pochi colori all’interno dell’immagine, puoi modificarne la quantità, nell’esempio ho scelto 64 colori e il risultato ottenuto rispetto all’originale non varia quasi per niente.

Il dithering è un disturbo inserito volutamente dal grafico per rendere meno visibile la distorsione dovuta all’alleggerimento del campione,  il mio consiglio è quello di non esagerare mai con il dithering altrimenti la vostra immagine diventa un grosso ammasso di disturbo che ricorda tanto le gif di bassa qualità.

Infine come ultima modifica, devi diminuire la dimensione dell’immagine, nel mio caso 2749×2429 è davvero troppo per essere inserita nell’articolo del blog, quindi l’ho abbassata a 500×442, ottenendo così un png di qualità accettabile e dimensioni ridotte.

Step 4: il risultato

Il risultato dell’ottimizzazione è quello che segue

alleggerire immagini png: risultato finale

Alleggerire immagini jpg

Il formato jpg è forse quello che comprime di più le immagini, quindi l’ottimizzazione risulta molto più sensibile in questo tipo di formato piuttosto che in altri.

Step 1: apri photoshop

Se eri disinteressato ai png, riporto anche per i jpg il primo difficile passaggio.

Step 2: Salvare l’immagine per Web

Come per i png procediamo con il salvataggio per il web cliccando su File > Salva per Web, si aprirà una dialog box differente da quella per i png, sarà infatti quella adatta ai file jpg, con le possibilità di modifica ridotte all’osso, potrai infatti cambiare la qualità l’alone e la sfocature, ma nella maggior parte dei casi ti serviranno solo il primo e l’ultimo parametro.

alleggerire immagini jpg

 Come puoi osservare l’immagine pesa 227.8K troppo, anche per un’immagine di background, quindi procedi con la compressione, fino a portarla ad un risultato ottimale di ~30K.

N.B.
30K sono un mio consiglio, il peso varia in base agli utilizzi che devi farne, ad esempio per un background esteso su tutta la grandezza della finestra del browser, 100K è un risultato più che buono.

Step 3: ottenere il risultato ottimale

alleggerire un jpg

Per ottenere il risultato sperato, bisogna per prima cosa rimpicciolire l’immagine, per essere inserita in un post non deve essere gigantesca e ricorda: per quanto riguarda il caricamento delle immagini, ai browser non piacciono le immagini grandi rimpicciolite in seguito con il css o l’html, quindi dove possibile usa le immagini solo ed esclusivamente nella dimensione originale.

In seguito al rimpicciolimento, modifica il campo qualità, in modo da abbassare sempre più il peso dell’immagine, sino ad arrivare ai 30K.

Step 4: il risultato

Ecco il risultato dell’ottimizzazione

risultato ottimizzazione jpeg

Conclusioni

Ti è piaciuto il tutorial? Ne vuoi qualcuno in particolare? scrivimelo nei commenti qui sotto 😉