Elemento da non trascurare nella realizzazione di un sito web e soprattutto nella progettazione di una grafica efficace di un sito e-commerce sono le immagini . Esse sono in grado di apportare valore alla comunicazione se scelte con criteri specifici e la giusta attenzione. Molto spesso nella fase di web design di un sito web si procede con molta attenzione nella realizzazione dei codici e dei contenuti testuali trascurando dettagli fondamentali come la scelta delle immagini da posizionare nelle pagine interne e in homepage. Questa attività è spesso lasciata alla fase di rifinitura e consegna lavori. Un errore che nasce dalla convinzione, purtroppo errata, che le immagini abbiano un semplice valore illustrativo e che siano parte integrante della pagina. In questo modo si trascura invece il ruolo fondamentale che rivestono nella creazione di emozioni positive e nel convincimento all’acquisto. Un’immagine giusta aiuta a migliorare la percezione del brand e aumenta i tassi di conversione di un sito web, influenzando la decisione d’acquisto del potenziale cliente.
In un sito web naturalmente la prima immagine a cui porre attenzione è il logo. Creare un logo che sappia comunicare con i visitatori del nostro sito è il primo passo fondamentale che dobbiamo realizzare nella progettazione del sito.
Nella realizzazione di siti web una buona immagine associata a un buon design del sito web permetterà inoltre di migliorare la user experience degli utenti generando un livello comunicazionale di maggiore qualità. Ma qual è l’immagine più coinvolgente?
Secondo noi in fase di creazione del sito vanno scelte delle immagini che ritraggono il target alle prese con i prodotti da promuovere, meglio se in uno schema dai colori rilassanti per coniugare al meglio design, semplicità e funzionalità e creare aspettative e senso d’attesa.
Immagini quindi in grado di colmare la distanza tra acquisto online e acquisto dal vivo in negozio, permettendo al lettore di pregustare il momento in cui riceverà a casa l’oggetto o il capo di vestiario acquistati online e creando quindi maggiori conversioni.
Ecco dunque come quella fase di ricerca e selezione delle immagini solitamente lasciata per ultima nella realizzazione del sito, debba recuperare la sua importanza e rivestire un ruolo realmente di primo piano agli occhi del web designer.
Un aspetto fondamentale delle immagini e anche quello di renderle conformi alla accessibilità di un sito web per persone con disabilità.
Puoi leggere anche ulteriori consigli per la creazione di un sito.
Come ottimizzare le immagini
La prima regola di un sito web e di un corretto web design è non fare attendere troppo il lettore in quanto una pagina “lenta” difficilmente verrà letta da qualcuno, a meno che non sia veramente interessato. Ecco dunque perché è fondamentale ottimizzare le immagini per il web, prestando molta attenzione al numero di byte del file prodotto, tenendo conto che sul web non esistono i DPI ma solo i pixel.
Oggi il numero di pixel di un’immagine di alta qualità si adatta ai monitor più comuni ed è quindi pari a 1280×800, 1024×768, 1280×1024, 1440×900. Queste 4 risoluzioni costituiscono infatti l’80% di quelle in uso pertanto cerchiamo di rispettarle nella realizzazione, considerando che immagini più grandi sono del tutto prive di senso. Un formato a parte è riservato alle immagine che vengono utilizzate nelle testate delle pagine. Questo immagini devono avere una larghezza minima di 1920px. La loro l’altezza dipende invece da quanta importanza vogliamo dare all’header (parte alta) della pagina web. Le altezze più comuni variano da un minimo di 300px fino a 700-800px.
L’altezza va scelta anche in base al tipo di contenuto che è presente nella pagina. Se la pagina contiene prodotti di un e-commerce è conveniente che l’immagine di testata non sia troppo alta per dare modo ai prodotti di essere visibili senza scrollare o come direbbe un tecnico essere visibili above the fold.
Se la pagina contiene contenuti meno importanti possiamo usare foto più alte che possono dare importanza e abbellire la pagina web.
In definitiva non esiste una regola precisa, ma ogni pagina va pensata al meglio per migliorare la user experience e le conversioni, soprattutto nel caso di un sito responsive.
Le immagini devono essere ottimizzate anche per fare in modo che l’hosting per siti web che le alloggia non sia inutilmente sovraccaricato con MB inutili e dannosi anche per la velocità del sito.
Immagini e dispositivi mobili
Le immagini sui dispositivi mobili (smartphone e tablet) devono essere ottimizzate e presenti nel numero strettamente necessario. Google il 26 Marzo 2018 ha annunciato l’implementazione dell’indicizzazione cosiddetta “mobile-first“. Sostanzialmente Google ha consigliato a tutti i webmaster di essere molto attenti ai contenuti per dispositivo mobile in quanto un caricamento rapido delle pagine da smartphone e similare può determinare un migliore posizionamento della serp di Google per questi dispositivi. Naturalmente questo resto uno dei tanti fattori che determinano il posizionamento di un sito web, ma esso è comunque diventato molto più importante rispetto al passato.
Le immagini in una pagina web in versione mobile deve essere quindi molto leggera e veloce nel caricamento. Per avere questa caratteristica la pagina dovrebbe a nostro giudizio avere sul mobile non più di una foto e tale foto dovrà essere ottimizzata al massimo.
Formati e qualità dell’immagine
Un altro parametro da non sottovalutare è la qualità dell’immagine, che può essere mantenuta utilizzando software ad hoc primo tra tutti Photoshop, anche se esistono alternative gratuite come RIOT o GIMP. Il file andrà poi salvato in formato JPG se è una foto o presenta tinte sfumate, GIF o PNG se ci sono sfondi trasparenti, tinte piatte o disegni al tratto.
