La corretta gestione delle immagini in un sito web è uno dei fattori primari per il raggiungimento dell’obiettivo che il sito si è prefissato, che sia vendere un prodotto in un e-commerce o avere un blog letto da molti utenti.
Alcune semplici regole vi aiuteranno ad ottenere immagini leggere e scattanti e a ridurre il tempo di caricamento.
I fattori da considerare sono: formato – dimensione – risoluzione
Formato delle immagini
Esistono diversi formati per salvare le immagini, i principali sono soprattutto tre:
JPEG è il formato più conosciuto ed il più utilizzato. creato appositamente per comprimere le immagini ed averle più leggere, supporta milioni di colori mantenendo un peso contenuto. Non supporta la trasparenza né le animazioni.
PNG viene usato per immagini che non devono perdere dettagli e che necessitano di una trasparenza perfetta. È il formato adatto per creare menù con trasparenze, icone sfumate e ricche di dettagli. Utilizza una compressione anche se meno ridotta rispetto al JPG; di conseguenza occupa un maggiore spazio rispetto ad un file JPG. Non supporta le animazioni.
GIF 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 in tinte piatte, per cui non sarà possibile utilizzarlo per illustrazioni o fotografie. Supporta la trasparenza e le animazioni.
Dimensione delle immagini
La dimensione è espressa dal numero di pixel della base per il numero di pixel dell’altezza dell’immagine.
Una fotocamera digitale di solito crea dei file con minimo circa 3200 pixel per il lato lungo della foto, un monitor a 24 pollici ha una risoluzione massima dello schermo di 1920 pixel , inserire in un sito un’immagine con risoluzione superiore alla massima del monitor non la farebbe visualizzare tutta contemporaneamente, un buon compromesso in considerazione dei vari device presenti sul mercato è avere immagini con il lato lungo di massimo 1200 pixel.
Risoluzione delle immagini
Si esprime in PPI ovvero “pixel per inch” (pixel per pollice lineare) e indica quanti pixel devono starci in una linea lunga un pollice. Più pixel sono presenti più la risoluzione è alta.
Le fotocamere di solito sono settate per scattare foto adatte alla stampa, quindi immagini con risoluzione a 300 ppi, fino a qualche anno fa i monitor lavoravano con una risoluzione di 72 ppi, ma ora troviamo in commercio numerosi dispositivi con un’alta densità di pixel per pollice (display Retina).
Come ottimizzare le immagini con Photoshop
Apriamo una foto con Photoshop.
Apriamo la finestra dal menù File > Salva per il Web
Si aprirà un pannello per il salvataggio dell’immagine con diverse indicazioni:
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- Qualità: serve per impostare la qualità della 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%.
4- Dimensione immagine: sono i parametri in pixel di larghezza e altezza
Ipotizzando che l’immagine sia destinata al web riduciamo la larghezza dell’immagine a 1200 px, l’altezza cambia automaticamente e il peso diminuisce.
5- Il valore riportato indica il peso dell’immagine.
6- Indica il tempo che ci vuole per caricare questa foto.
7- Nel caso volessimo rimuovere i dati EXIF presenti nelle foto scattate con le fotocamere digitali, basterà impostare Nessuno alla voce Metadati
8- Volendo si può scegliere di salvare l’immagine con un dato peso, dobbiamo cliccare sull’icona in alto a destra e poi scegliere Ottimizza per dimensione immagine. Dopo di che, scegliamo il peso e diamo Ok, e successivamente salviamo l’immagine.
Questo è il procedimento più veloce e corretto per salvare un immagine Jpeg compressa.
Ricordate inoltre che un visitatore medio in circa 5 secondi, se non è attratto dalla tua pagina web, smetterà di visionarla per dirigersi da un altra parte. Le immagini sono una componente importante per attrarre l’utente che può essere un tuo potenziale cliente. Non inserire contenuti, soprattutto immagini, solo perchè lo devi fare. Utilizzate immagini creative e di impatto, immagini originali, createle voi stessi in modo da avere un contenuto unico che non ritroverete su altri siti.