Come ottimizzare le immagini con Photoshop con lo strumento Salva per il web per renderle più leggere e per velocizzare le pagine web.
Nei precedenti articoli abbiamo visto diversi metodi per ridurre il peso delle immagini mantenendo una buona qualità in modo da rendere più veloce il caricamento della pagina web in cui vengono pubblicate. Ho recensito delle applicazioni online come TinyPNG e JPG Optimizer, due programmi open source come Caesium e RIOT e infine un metodo per ottimizzare gli screenshot presi con Snagit 12 utilizzando una sinergia tra Gimp e il plugin Riot.
Il celebre programma di grafica Photoshop può servire per ottimizzare le immagini anche senza usare dei plugin specifici. Il concetto è sempre quello di diminuire il peso delle foto mantenendo il massimo della qualità. Si tratta in sostanza di trovare un compromesso tra queste due opposte esigenze. Per testare i diversi metodi di ottimizzazione sono partito da una immagine comune che non è altro che lo screenshot dell'intero schermo del computer su cui sto digitando.
Tale immagine è in JPG, ha dimensioni di 1920x1080 pixel e peso di 319KB. Con una ottimizzazione fatta con Gimp e Riot tale istantanea è stata ridimensionata a 620x349 pixel e, applicando un rapporto di compressione del 70% è stata ottenuta una immagine ottimizzata del peso di 28KB. In sostanza partendo da 319KB siamo scesi a 28KB con un guadagno superiore al 90%.
OTTIMIZZARE LE IMMAGINI CON PHOTOSHOP
Si apre Photoshop e si va su File -> Apri per selezionare l'immagine originale dello screenshot
Si va quindi su Immagine -> Dimensione immagine e si mette 72 in Risoluzione nella finestra che si apre. Successivamente nella stessa finestra in larghezza si sceglie quella che serve. Per una immagine che va pubblicata in un blog una larghezza di 600-700 pixel è quella massima compatibile con il layout. Per poter fare un confronto con Gimp e Riot ho scelto la stessa larghezza di 620 pixel. Si va su OK per ridimensionare la foto dopo aver lasciato la spunta su Mantieni proporzioni.
È il momento di andare su File -> Salva per il web per aprire la finestra di configurazione
in cui ho apposto dei numeretti colorati per indicare i vari passaggi:
- Si sceglie la visualizzazione in due finestre per visualizzare contemporaneamente la immagine originale e quella ottimizzata. Alternativamente si può visualizzare solo quella originale, solo quella ottimizzata o avere una visione a 4 finestre con differenti gradi di ottimizzazione
- Si sceglie il formato di uscita tra JPG, PNG e GIF. La scelta migliore è la JPG se non sono presenti effetti di trasparenza e il conseguente canale Alpha.
- Si seleziona il grado di compressione selezionando la qualità Bassa, Media, Alta, Molto Alta e Massima. Cliccando sulla freccetta accanto a Qualità si può settare anche un valore numerico tra 0 e 100. La qualità bassa ha un valore numerico di 30 mentre quella media un valore di 60.
- Si mette la spunta a Progressione ottimizzata e si toglie da Incorpora profilo colore.
- In Dimensione Immagine si può ulteriormente intervenire sulla dimensione.
- In basso a sinistra della immagine ottimizzata si visualizza il peso della immagine con i parametri applicati e anche il tempo di caricamento in funzione della velocità di connessione.
- In Metadati si sceglie Nessuno per alleggerire ulteriormente la foto
- Si va su Salva per salvare l'immagine ottimizzata.
Nello screenshot ho affiancato quattro soluzioni. La prima è lo screenshot ottimizzato con Gimp e Riot con un peso di 27KB, la seconda è la stessa immagine ottimizzata con Photoshop con una qualità 30 (Bassa) e con un peso di 24KB, la terza e la quarta hanno rispettivamente una qualità di 60 (Media) con peso 48KB e 75 con peso 72KB . Non si notano grandi differenze tra le immagini e tutte hanno una qualità accettabile. La scelta quindi tra un metodo di ottimizzazione e l'altro dipenderà dai programmi che abbiamo nel nostro computer e da abitudini personali di gestione delle foto.
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy