Benvenuto su Evermind - il primo network di Digital Remote Worker

Uno degli errori che spesso vedo online, è quello di siti web con immagini pesantissime.

La grandezza di un immagine, ovvero il valore di altezza e larghezza, non è vincolata al suo peso in byte. Ho spesso visto siti con 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.

Come si può notare nell’immagine seguente, la trasparenza dell’ombra è imperfetta.

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.

L’ombra è perfetta. La trasparenza è integra e l’immagine non ha nessun disturbo o perdita di definizione.

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:

  1. 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;
  2. Il menu a tendina che vi fa scegliere il tipo di immagine, in questo caso Jpeg, ma cliccando potete scegliere altri formati di esportazione;
  3. 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;
  4. Quality: Serve per impostare la qualità della compressione
  5. Image Size: sono i parametri in pixel di larghezza e altezza
  6. Il valore riportato indica il peso dell’immagine (in questo caso 3.303Mb)
  7. 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 (numero 4)

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. Ipotiziamo 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

share

autore

Lavoro nel settore della grafica dai tempi di Photoshop 5 e 3D Studio Max4. Quando le foto si acquistavano nei cataloghi cartacei e il massimo della connessione era l'ISDN a 128kb.

In questi 16 anni di lavoro ho cambiato numerose agenzie e mi sono adattato a differenti metodi lavorativi. Grazie a questo percorso ho avuto modo di specializzarmi sia nel settore web che in quello tipografico.

Ho studiato praticamente da autodidatta, divorando numerosi volumi, prima, e attraverso il web, poi. La curiosità e la voglia di approfondire mi hanno formato e dato modo di insegnare in master privati (in aula) e in lezioni One to One (Illustrator, Photoshop, Blender)

La vita mi ha portato a vivere a Londra, dove ho lavorato in diverse agenzie come freelance, fino a quando sono rientrato in Italia per fondare, assieme a FrancescoDanilo e Marco, Evermind

Sono Art Director, membro dell'Art Director Club Italiano.

   

altre storie

dicci la tua