Prendi un qualsiasi sito che ti ha perso nei primi secondi e torna in cima alla pagina. È probabile che le immagini c'entrassero qualcosa. Una foto di repertorio di sconosciuti sorridenti che non somigliano per niente alle persone che l'azienda serve davvero. Un'immagine principale così vaga che potrebbe appartenere a qualsiasi azienda di qualsiasi settore. Oppure nessuna immagine, e la pagina sembra spoglia e incompleta. Le immagini di un sito non sono decorazione. Sono comunicazione. Questo articolo spiega cosa fanno davvero le immagini di un sito, come scegliere quelle giuste, dove metterle in ogni pagina e cosa succede quando sbagli.
I visitatori elaborano le immagini più in fretta delle parole. Prima che qualcuno legga il tuo titolo, il suo cervello si è già fatto una prima impressione dall'aspetto visivo. Questo significa che le tue immagini sostengono una tesi sulla tua azienda prima che tu possa farlo da solo. La questione è se quella tesi sia quella che vuoi sostenere.
Cosa fanno davvero le immagini di un sito?
Ogni immagine del tuo sito dice qualcosa a un visitatore. L'immagine principale della tua home page dice "questo è il tipo di azienda che siamo e questo è il pubblico a cui ci rivolgiamo". La foto della pagina Chi siamo dice "qui ci sono persone vere". La foto del prodotto nella pagina di un servizio dice "ecco cosa ottieni lavorando con noi".
Quando questi segnali sono chiari e pertinenti, i visitatori si sentono orientati. Quando sono vaghi o generici, i visitatori non sentono niente, ed è il risultato peggiore. Un visitatore che non sente niente non ha motivo di continuare a leggere.
Le immagini guidano anche dove va l'occhio. È il cuore della gerarchia visiva di una pagina. Un'immagine ben posizionata porta l'attenzione verso la sezione che conta. Una posizionata male la divide e lascia il visitatore incerto su dove guardare dopo. Ogni immagine dovrebbe guadagnarsi la sua posizione aiutando il visitatore a muoversi nella direzione giusta.
Foto vere o foto di repertorio: fa differenza?
Sì. Più di quanto la maggior parte delle persone si aspetti.
I visitatori riconoscono le foto di repertorio meglio di cinque anni fa. La sala riunioni perfettamente illuminata con quattro professionisti che annuiscono davanti a un portatile. La stretta di mano davanti a un panorama di città. La donna sorridente con una tazza di caffè. Queste immagini sono così comuni che i visitatori hanno sviluppato una specie di immunità visiva. Le vedono e non registrano niente.
Le foto vere fanno l'opposto. Una foto della tua vera vetrina, del tuo vero team, del tuo vero lavoro finito. Queste immagini sono specifiche per te e solo per te. Un visitatore che le vede ha la prova che dietro il sito esiste un'azienda reale, una delle cose più preziose che un'immagine possa comunicare. Anche una foto fatta col telefono con una buona luce è spesso più efficace di un'immagine di repertorio curata, perché è vera.
Detto questo, le foto di repertorio hanno il loro posto. Per gli articoli del blog, per illustrare concetti astratti, per riempire gli spazi secondari in cui la specificità conta meno, una foto di repertorio scelta bene fa il suo lavoro. La regola è: usa foto vere dove è in gioco la fiducia e foto di repertorio dove l'immagine sostiene solo il contenuto senza fare un'affermazione sulla tua azienda.
Come scegliere l'immagine giusta per ogni pagina?
Prima di cercare un'immagine, chiediti quale compito deve svolgere in quella pagina specifica.
Nella tua homepage, l'immagine principale deve comunicare cosa fai e per chi lo fai prima che qualcuno legga una parola. Se un visitatore potesse guardare solo la tua immagine principale e non avere idea di quale sia il tuo settore, l'immagine non sta facendo il suo lavoro.
Nella tua pagina Chi siamo, l'immagine deve essere personale. Mostra le persone. Mostra lo spazio. Mostra qualcosa che faccia sembrare l'azienda umana e specifica, non istituzionale e anonima.
Nella pagina di un servizio o di un prodotto, mostra il risultato. Un prima e dopo per un'impresa di ristrutturazioni. Una schermata della dashboard per uno strumento software. La foto del piatto finito per un servizio di catering. Le immagini del risultato convincono più delle immagini del processo, perché rispondono alla domanda che il visitatore si pone davvero: cosa avrò quando sarà finito?
Quando sai qual è il compito, allora trovi l'immagine. Non il contrario.
Cosa rende un'immagine controproducente?
Irrilevanza
Un'immagine che non ha niente di specifico da dire sulla tua azienda, sul tuo servizio o sul tuo cliente dice al visitatore che nessuno ha pensato con attenzione all'esperienza visiva del sito. Quell'impressione resta.
Incoerenza
Se il tuo testo è caldo e colloquiale ma le immagini sono fredde e istituzionali, la pagina sembra incoerente. I visitatori colgono quella dissonanza anche quando non riescono a nominarla. Il tono delle immagini e quello del testo devono andare d'accordo.
Tempi di caricamento lenti
Le immagini grandi e non compresse sono la causa più comune in assoluto dei siti lenti. Una pagina che impiega più di tre secondi a caricarsi su un telefono perde una parte notevole dei visitatori prima che venga visto qualcosa. Ogni immagine che carichi dovrebbe essere compressa per il web. La maggior parte delle piattaforme per siti se ne occupa in parte in automatico, ma vale la pena sapere cosa stai caricando. Scopri come la velocità del sito influisce su visitatori e posizionamento per avere il quadro completo.
Testo alternativo mancante
Ogni immagine del tuo sito ha bisogno di una breve descrizione di ciò che mostra, scritta nel campo del testo alternativo (alt text). È importante per due motivi. I visitatori che usano i lettori di schermo si affidano al testo alternativo per capire cosa contiene un'immagine. I motori di ricerca usano il testo alternativo per indicizzare le immagini. Saltarlo è un modo rapido per perdere sia punti di accessibilità sia valore SEO.
Dove vanno messe le immagini nelle pagine?
Non esiste una regola universale per la posizione delle immagini, ma ci sono alcuni schemi che funzionano in modo costante.
Metti la tua immagine più forte dove i visitatori guardano per primo. Nella maggior parte delle pagine è la sezione in alto, above the fold. Se un visitatore scorre verso il basso prima di impegnarsi a leggere, il secondo spazio per un'immagine, da qualche parte a metà pagina, lo intercetta durante lo scorrimento. Una terza immagine vicino al fondo di una pagina lunga riporta l'attenzione dei visitatori che hanno letto quasi tutto.
Usa le immagini per spezzare le sezioni di testo lunghe, ma solo quando l'immagine aggiunge qualcosa. Un'immagine che illustra il punto trattato nel paragrafo accanto sta facendo un lavoro. Un'immagine messa lì solo perché la sezione sembrava troppo lunga è riempitivo, e i visitatori se ne accorgono.
Su smartphone, la posizione delle immagini cambia perché lo schermo è stretto e le immagini si impilano in verticale. Un'immagine che sta accanto al testo su desktop comparirà sopra o sotto di esso su smartphone. Controlla come appare ogni pagina su un telefono e assicurati che l'immagine abbia ancora senso nella nuova posizione. Fa parte del garantire che il tuo sito segua i principi del design responsive in ogni pagina.
Che formato di file devono avere le immagini?
La versione breve:
- JPEG per le fotografie. File piccolo, alta qualità, funziona ovunque.
- PNG per loghi, icone e tutto ciò che ha uno sfondo trasparente o testo nitido.
- WebP per entrambi, se la tua piattaforma lo supporta. Produce file più piccoli di JPEG e PNG a parità di qualità. La maggior parte dei browser moderni gestisce WebP senza problemi.
- SVG per icone e illustrazioni semplici. Si ridimensiona perfettamente a qualsiasi misura con file piccolissimi.
Per le dimensioni dei file, punta a meno di 200 kilobyte per le immagini standard di una pagina. Le immagini principali possono arrivare a circa 400 kilobyte. Tutto ciò che supera queste dimensioni va compresso prima di caricarlo. Una foto da cinque megabyte scattata col telefono non ha posto in una pagina web.
Cos'è il testo alternativo e perché ogni immagine ne ha bisogno?
Il testo alternativo è una breve descrizione scritta associata a un'immagine. Sta nel tag dell'immagine nella pagina, invisibile ai visitatori che vedono ma letta dai lettori di schermo e dai motori di ricerca. Entrambi ne hanno bisogno per capire cosa contengono le tue immagini.
Per l'accessibilità, il testo alternativo è il modo in cui i visitatori che usano i lettori di schermo vivono le immagini del tuo sito. Senza di esso, quei visitatori non sentono niente quando l'immagine si carica, e questo lascia un vuoto in ciò che volevi comunicare. Per la SEO, i motori di ricerca non vedono le immagini come le persone. Il testo alternativo è il modo in cui capiscono cosa mostra un'immagine e se è pertinente alla pagina che sostiene.
Scrivere bene il testo alternativo significa descrivere ciò che c'è davvero nell'immagine, in modo preciso e semplice. Una foto di una cucina ristrutturata riceve un testo alternativo come "cucina bianca in stile shaker con piani in marmo dopo la ristrutturazione" e non "foto cucina" o "immagine1". Se la tua parola chiave ci sta in modo naturale nella descrizione, inseriscila. Ma scrivi prima la descrizione. Un testo alternativo che esiste solo per ripetere parole chiave fallisce entrambi gli scopi.
Ogni immagine che carichi dovrebbe avere il testo alternativo scritto prima che la pagina vada online. Richiede meno di un minuto per immagine e influisce sia su chi può accedere ai tuoi contenuti sia sul posizionamento delle tue pagine.
Come WEMASY gestisce le immagini
Il creatore di siti di WEMASY include blocchi immagine che puoi aggiungere a qualsiasi sezione di pagina. Carichi direttamente nel creatore, posizioni e ridimensioni senza toccare codice e aggiungi il testo alternativo nello stesso passaggio. Le immagini vengono servite in automatico in modo responsive, quindi si adattano a ogni dimensione di schermo senza che tu debba creare versioni separate per desktop e smartphone.
Le sezioni di pagina di WEMASY supportano le immagini accanto al testo in layout flessibili a colonne, oppure come sfondi a tutta larghezza per le sezioni in cui un forte elemento visivo dà il tono. In entrambi i casi l'immagine resta legata al contenuto che sostiene, invece di galleggiare fuori dal layout.
Scopri cosa è incluso nel creatore di siti WEMASY o guarda i piani nella pagina dei prezzi.
Domande frequenti sulle immagini del sito
Ho bisogno di foto professionali per il mio sito?
Le foto professionali fanno una vera differenza nelle pagine chiave, in particolare nella home page e nella pagina Chi siamo, dove si forma la fiducia. Per le immagini secondarie, gli articoli del blog e i contenuti visivi di supporto, una foto ben illuminata scattata con un telefono moderno va benissimo. La priorità è che l'immagine sia vera e pertinente alla tua azienda, non che sia stata scattata da un professionista. Con il creatore di siti di WEMASY puoi impostare tutto questo direttamente sul tuo sito.
Quante immagini deve avere una homepage?
Abbastanza da sostenere le sezioni, non così tante da far sembrare la pagina disordinata o da rallentarne il caricamento. Un'immagine principale forte, una o due immagini nel corpo della pagina e, se vuoi, una foto del team o dello spazio di lavoro più in basso sono una struttura ragionevole per la maggior parte delle homepage di piccole aziende. Ogni immagine deve guadagnarsi il suo posto invece di riempire spazio.
Posso usare immagini dei siti di foto di repertorio sul mio sito?
Sì, con alcune condizioni. I siti di foto di repertorio offrono immagini con licenze che permettono l'uso commerciale, ma controlla le condizioni di ogni immagine prima di usarla. Il limite pratico è che queste immagini compaiono su molti altri siti, quindi usale per gli spazi di supporto e secondari, non come immagine principale nelle pagine in cui la fiducia conta di più, come la home page o la pagina Chi siamo.
Che dimensione devono avere le immagini che carico sul sito?
Comprimi prima di caricare. Punta a meno di 200 kilobyte per la maggior parte delle immagini di pagina e a meno di 400 kilobyte per le immagini principali. Usa JPEG per le fotografie, PNG per loghi e immagini trasparenti e WebP se la tua piattaforma lo supporta. Ridimensiona sempre l'immagine alla larghezza massima a cui verrà mostrata prima di caricarla, invece di lasciare che sia il browser a ridurla.
Le immagini influiscono sul posizionamento del mio sito nei motori di ricerca?
Sì, in due modi. Le immagini grandi e non compresse rallentano la pagina, e i motori di ricerca ne tengono conto nel posizionamento. Le immagini senza testo alternativo perdono l'occasione di dire ai motori di ricerca cosa contiene la pagina. Immagini dimensionate bene e con un testo alternativo descrittivo contribuiscono sia alla velocità della pagina sia alla visibilità nei motori di ricerca.