Capita spesso di vedere siti internet lentissimi in quanto ci sono immagini pesantissime che non rendono facile ne piacevole la consultazione.
La grandezza di un immagine, (valore di altezza e larghezza), non è vincolata al suo peso in byte: è possibile trovare immagini minuscole che caricavano dopo quasi un minuto. La spiegazione del ritardo era sempre legata al peso dell’immagine in byte.
Ecco una guida per capire come ottimizzare le immagini per il web, in pochi e semplicissimi passi, utilizzando gli strumenti di Photoshop.
Nello specifico vedremo:
I formati da utilizzare
Controlleremo la risoluzione
Parleremo dei formati di esportazione
Come esportare un immagine per un dato peso
Ecco i formati da utilizzare
Gif: Il formato gif viene utilizzato per immagini piatte, con poche sfumature. Supporta la trasparenza e può essere utilizzato per realizzare animazioni, ma ha il limite di poter contenere solo 256 colori. Solitamente tale formato viene utilizzato per piccole immagini, pulsanti e icone, o con immagini che hanno pochi colori e solitamente in tinte piatte. A causa del limite dato dal numero di colori, la trasparenza che offre il formato gif è più consigliato per immagini con profili piatti, che con quelli sfumati o frastagliati.
PNG: Nasce come sostituto del formato Gif, a differenza del Gif non ha limiti di colori, supporta la trasparenza ma non le animazioni. Viene usato per immagini che non devono perdere dettagli e che abbiano bisogno di una trasparenza perfetta. È il formato adatto per creare menù con trasparenze, per icone sfumate e ricche di dettagli..
Jpeg: È il formato più conosciuto ed il più utilizzato. Supporta milioni di colori mantenendo un peso contenuto. Non supporta la trasparenza né le animazioni. Solitamente viene adoperato per foto e per immagini con molti dettagli.
Passiamo alla nostra guida. Quello che faremo in questo tutorial sarà il salvataggio di un immagine Jpeg da visualizzare a video
Apriamo una foto a caso con Photoshop. La prima cosa da fare è assicurarci che la risoluzione sia di 72dpi e non oltre. Premiamo quindi CTRL+ALT+I per aprire il pannello Image Size. Controlliamo il parametro Resolution e assicuriamoci che sia impostato sui 72 dpi. Se il valore dovesse essere superiore, abbassiamolo facendo attenzione che sia deselezionato il box Resample Image, subito sotto.
A questo punto premiamo contemporaneamente Ctrl+Alt+Shift+S per aprire il pannello Salva per il Web (in alternativa lo trovate sotto il menù FIle>Salva per il Web)
Si aprirà un pannello per il salvataggio dell’immagine.
I punti numerati sono:
- Numero di finestre per l’anteprima. La prima mostra la foto originale, la seconda mostra quella che si sta ottimizzando, la terza mostra sia l’originale che quella ottimizzata, e la quarta finestra mostra 4 specchietti diversi, da impostare a piacimento. Impostiamo la visuale sulla terza finestra;
- Il menu a tendina che vi fa scegliere il tipo di immagine, in questo caso Jpeg, ma cliccando potete scegliere altri formati di esportazione;
- Progressive: Spuntando questa voce l’immagine viene caricata con diversi passaggi, in modo tale da avere da subito un immagine di riempimento che si definisce man mano che viene caricata;
- Quality: Serve per impostare la qualità della compressione;
- Image Size: sono i parametri in pixel di larghezza e altezza
- Il valore riportato indica il peso dell’immagine (in questo caso 3.303Mb)
Indica il tempo che ci vuole per caricare questa foto, in questo caso 18 Secondi con una connessione da 2Mbps. Per cambiare il tipo di connessione basta cliccare nel punto indicato dalla freccia.
Il primo punto che ci interessa è il 5, quello relativo alle dimensioni. Ipotizzando che l’immagine sia destinata al web, 3872px di altezza sono eccessivi, riduciamoli portandoli a 1200px (la larghezza cambia automaticamente, e il peso diminuisce). Potete impostare lo zoom al 100% dal menù a tendina a sinistra
Adesso non ci resta che settare la compressione
Se la compressione è eccessiva l’immagine mostrerà dei difetti, delle chiazze di colore e i contorni sfuocati
Solitamente è sconsigliato settare la compressione sotto il 65%, quindi scegliamo 70% e clicchiamo su Salva.
Nel caso volessimo rimuovere i dati EXIF presenti nelle foto scattate con le fotocamere digitali, basterà impostare None alla voce Metadata
Questo è il procedimento più veloce e corretto per salvare un immagine Jpeg compressa.
Volendo si può scegliere di salvare l’immagine con un dato peso. Ipotizziamo di voler salvare una Jpeg da 300kb; una volta ridotte le dimensioni dobbiamo cliccare sull’icona in alto a destra (segnato dalla freccia) e poi scegliere Optimize to File Size
Dopo di che, scegliamo il peso e diamo Ok, e successivamente salviamo l’immagine.
Ed ecco ottimizzata la nostra jpeg, per il web
Fonte: Evermind.it