Al giorno d’oggi tutti abbiamo l’esigenza di pubblicare delle immagini sul web. Che sia sul nostro sito web aziendale o nell’account facebook business tutti abbiamo questa necessità.
Ma sappiamo davvero come trattare le immagini da pubblicare sul web? In questa breve guida vi spiegherò come ottimizzare le immagini per il web.
3 parametri per ottimizzare le immagini per il web
Innanzitutto andiamo ad analizzare i 3 parametri da conoscere per realizzare delle immagini per il web corrette.
Dimensioni delle fotografie
Immaginiamo la nostra immagine digitale come un foglio di carta con una dimensione, ad esempio un foglio A4 ha una dimensione standard di 210×297 millimetri.
Le immagini digitali invece si misurano solitamente in pixel. Quindi quando ti verranno richieste delle dimensioni specifiche (magari da un web master) per un’immagine, il pixel sarà l’unità di misura che vi verrà fornita. Questo ovviamente è anche il valore che va a definire il rapporto della dimensione della foto (ad esempio: quadrata, rettangolare ecc..).
Risoluzione, per non avere immagini sgranate
La risoluzione indica invece il livello di dettaglio di un’immagine bitmap e si misura in pixel per pollice (dpi- Dots Per Inch).
Maggiore è il numero di pixel per pollice, maggiore è la risoluzione. Un’immagine con una risoluzione elevata consente di ottenere una migliore qualità. Per il web esiste una risoluzione standard fissata a 72 dpi. Se dovete realizzare un’immagine per il web, questa è la risoluzione da utilizzare. Questo valore è stato fissato in base alla risoluzione dei monitor.
Da leggere: Fotografia: non basta il fotografo ci va la postproduzione
Il peso delle immagini digitali
Per peso di un’immagine, andiamo ad indicare la dimensione espressa in megabyte. Questo valore è direttamente collegato ai precedenti valori. Maggiori saranno dimensioni e risoluzione, maggiore sarà il peso dell’immagine.
Il peso delle immagini per il web è molto importante, in quanto determina la velocità di caricamento di questa, quando un utente visiterà il nostro sito web aziendale.
Ecco perchè è sconsigliato superare 72 dpi di risoluzione di un’immagine. Cerchiamo sempre di ottimizzare il peso delle immagini affichè tutti gli utenti, anche quelli che non dispongono di una connessione internet veloce, possano visitare i vostri contenuti web senza disagi. Esiste però una cosa chiamata compressione dell’immagine. Molti software di editing per immagini, ci permettono in fase di esportazione, di andare a comprimere l’immagine. Questa operazione lascia invariate dimensioni e risoluzione dell’immagine, ma va ad ottimizzare le informazioni di questa. Di conseguenza il peso espresso in megabyte verrà ridotto notevolmente.
Nella vita niente viene dato per niente, per questo motivo, teniamo sempre conto che esisterà una piccola perdita di qualità quando andiamo ad effettuare la compressione. L’importante è non abusarne.
Come ritagliare un’immagine per il sito web
Facciamo ora un esempio per spiegarvi come creare un’immagine per il web quando vi viene fatta una richiesta specifica. Per questa guida utilizzeremo Adobe Photoshop. Ricordiamo a tutti che questo famoso software, distribuito dalla casa Adobe, non è opensource.
Fase 1: la richiesta del web master
Ipotizziamo che l’immagine riportata in questo articolo vi sia stata fornita dal vostro fotografo aziendale.
Presupponiamo di dover realizzare un banner per il nostro sito web, avente dimensioni 1920px X 780px.
Fase 2: Verificare le dimensioni di un’immagine
Avvieremo il nostro photoshop e la prima cosa che andremo a fare sarà aprire questo file per verificarne le dimensioni.
In alto a sinistra FIle> Apri.
Di conseguenza si aprirà una finestra dove andare a selezionare il nostro file. Una volta aperto andremo a verificare le dimensioni dell’immagine. Apriamo dal menù la tendina “Immagine”, e selezioniamo “Dimensioni Immagine”.
Vedremo apparire una tendina che ci indicherà le dimensioni della foto originale.
Inutile specificare che le dimensioni dell’immagine nativa, devono essere superiori alla dimensione dell’immagine da realizzare.
Appurato ciò, andremo a chiudere il file.
Come? Aprendo sempre la tendina del menù File e cliccando su Chiudi (Ctrl+W).
Da leggere: Creare un sito web: anche l’occhio vuole la sua parte
Fase 3: Creare l’immagine per un banner
Una volta chiuso il file andiamo sempre nella medesima tendina e apriamo Nuovo (File>Nuovo). Ci apparirà la tendina che richiede quali dimensioni dovrà avere il nostro nuovo file. Niente di più semplice, andremo ad inserire i dati forniti con una risoluzione di 72 dpi (Pixel/pollice).
Ecco apparire un riquadro bianco con le caratteristiche di cui abbiamo bisogno. Ora semplicemente andiamo nella tendina File e selezioniamo “Inserisci”. Photoshop, nelle versioni recenti, ci importa il file, adattandolo alla dimensione del nostro quadro di lavoro (anche se l’immagine originale è più grande di questa). Vedrete apparire una X sull’immagine con 4 quadratini ai lati come nell’immagine riportata. Cliccando e tenendo premuto con il mouse ed al contempo tenendo sempre premuto il tasto shift (per mantenere il rapporto originale della foto ed evitare che venga deformata) andiamo a trascinare un angolo per ingrandire l’immagine.
Successivamente, sempre con il mouse, cliccando e tenendo premuto in un qualunque punto dell’immagine andremo a centrarla come da nostro gusto. Una volta soddisfatti possiamo premere invio e vedremo la X grigia sparire.
Nota bene: se non dovessi essere soddisfatto della tua prima trasformazione ti basterà aprire la tendina “Modifica” e selezionare trasformazione libera (Ctrl+T). Apparirà nuovamente la X e potrai mettere nuovamente mano alla tua immagine. Sempre con il tasto “Invio” confermerai la tua trasformazione.
Fase 4: Esportare le immagini per il web
A questo punto non ci rimane che esportarla. In questo esempio, andiamo ad esportarla per il web con una piccola compressione. Ancora una volta dentro la tendina “File” andiamo a selezionare “Salva per web”.
Vedremo apparire la finestra riportata nello screenshot sotto. Assicuriamoci che il valore in alto a destra sia impostato su 60. Questo valore potrete variarlo in base alle vostre necessità. Per mia esperienza, 60 è una buona media che va bene per molte situazioni. Premendo su “Salva”, posizionato nella parte bassa della tendina, Photoshop vi chiederà come volete nominare il vostro file ed in quale cartella volete posizionarlo.
Selezionati questi due fattori potete premere nuovamente su “Salva” in basso a destra.
Ecco la vostra foto pronta per essere caricata sul vostro sito web profesionale o e-commerce.
Come ultimo argomento, voglio darvi un po’ di informazioni sulle dimensioni standard che devono avere le immagini per essere caricate su alcuni dei più noti social network.
Per semplificare maggiormente la cosa, abbiamo creato un’infografica che potrete consultare ogni volta che dovrete pubblicare un’immagine su un social network. Ricordiamo che quasi tutti i social network accettano i formati PNG e JPG. Parlando di risoluzione e peso dell’immagine, quasi tutti consigliano di caricare immagini meno pesanti di 100 kb.
Perciò Il mio consiglio rimane quello di non superare i 72 dpi e comprimere un po’ le vostre immagini per il web.
Ricordatevi sempre di non trascurare l’importanza della vostra comunicazione visiva, che costituisce ormai l’80% della vostra immagine aziendale.
Avete altri consigli utili? Commentate qua sotto -> li integreremo nell’articolo!
