Come scegliere le immagini giuste per il tuo sito web

Parti dalla funzione dell’immagine

Prima di scegliere una foto, chiediti: «Che cosa dovrebbe capire o provare il visitatore in questa parte della pagina?»

L’immagine della homepage può presentare l’attività. Una foto di un servizio può mostrare il lavoro o il suo risultato. Una foto del team aiuta a riconoscere le persone che il cliente incontrerà. Scegli un’immagine che sostenga quello scopo.

Prima della ricerca, descrivi ciò che ti serve in una frase: «Questa immagine deve mostrare un bagno piccolo che abbiamo ristrutturato e lasciare spazio per il titolo a sinistra». Un obiettivo preciso aiuta a scartare foto belle ma inadatte alla pagina.

Confronta le alternative con tre domande: Che cosa comunica questa immagine? È un’informazione utile qui? Rimane comprensibile nello spazio disponibile? Se non aggiunge informazioni utili o un’atmosfera adatta, la sezione potrebbe funzionare meglio con il solo testo.

Scegli un’immagine di apertura adatta all’attività

La grande sezione iniziale, spesso chiamata hero, è la prima cosa che molti visitatori vedono. L’immagine deve accompagnare il titolo, senza competere con esso.

Un’impresa di ristrutturazioni può mostrare una stanza finita o un artigiano al lavoro. Uno studio di fisioterapia può usare una foto naturale di una visita o di un esercizio. Un bar di quartiere può presentare il locale o un piatto riconoscibile.

Lascia una zona abbastanza libera per titolo e pulsanti. Se l’immagine attira così tanto l’attenzione da rendere poco chiara l’offerta, scegline una più semplice.

Valutala nella vera impaginazione. Una foto eccellente da sola può avere uno sfondo affollato proprio dietro il titolo. Mantieni titolo e pulsante come testo della pagina, senza incorporarli nell’immagine: potranno così adattarsi al layout.

Esempio: tre immagini per la stessa homepage

Immagina un’impresa con il titolo «Ristrutturazioni di bagni per case piccole». Deve scegliere fra tre fotografie:

• Una foto stock curata di un grande bagno di lusso. La luce è bella, ma l’ambiente non rappresenta gli spazi ridotti che l’impresa vuole mostrare. Potrebbe creare aspettative sbagliate sul lavoro.
• Una foto di un bagno ristrutturato dall’impresa, con un’inquadratura stretta e disordine visibile. Il soggetto è adatto, ma è difficile capire la disposizione. Prova un altro taglio o un’altra foto dello stesso progetto.
• Una foto chiara di un piccolo bagno ultimato. Spazi contenitivi, doccia e spazio disponibile sono ben visibili. Se rimane posto anche per il titolo, è la scelta migliore per questa pagina.

Se la doccia scompare dal ritaglio mobile della terza foto, prepara un taglio diverso o sposta il testo accanto all’immagine. Soggetto, messaggio e impaginazione finale devono guidare insieme la scelta.

Mostra il servizio o il suo risultato

Le immagini dei servizi sono utili soprattutto quando aiutano a immaginare il lavoro. Un idraulico può mostrare un’installazione completata o un tecnico a casa di un cliente. Un fotografo può presentare un esempio reale del proprio lavoro. Queste immagini raccontano più di una foto generica di qualcuno davanti a un portatile.

Scegli un’immagine che risponda a una domanda che il cliente probabilmente si pone. Una foto di una stanza finita mostra il risultato; un primo piano può mostrare una giunzione o una finitura; una foto di qualcuno al lavoro può spiegare una fase del processo. Sono funzioni diverse: scegli secondo ciò che la sezione promette di spiegare.

Aggiungi una breve didascalia che identifichi il lavoro e il dettaglio da notare. «Spazi contenitivi integrati sotto un soffitto inclinato» dice più di «Un altro cliente soddisfatto». Descrivi solo ciò che il progetto dimostra davvero e formula con precisione le affermazioni su qualità e risultati.

Usa foto naturali del tuo vero team

Una foto del team può rendere una piccola attività più accessibile se mostra le persone che i clienti incontreranno realmente. Un ambiente di lavoro familiare, espressioni naturali e pose rilassate risultano in genere più convincenti di una foto di gruppo molto costruita.

Per i ritratti individuali, mantieni inquadrature e sfondi simili. Usa foto aggiornate che rispecchino il servizio che i clienti possono aspettarsi.

Nome e ruolo accanto al ritratto collegano il volto alla persona che gestirà la richiesta o l’appuntamento. Può bastare un ritratto semplice e ben illuminato; non serve un servizio fotografico elaborato. Chiedi il consenso alle persone prima di pubblicare e fai attenzione a non mostrare involontariamente clienti o informazioni private sullo sfondo.

Scegli immagini coerenti con l’articolo del blog

L’immagine di un articolo deve far riconoscere l’argomento, non soltanto riempire uno spazio. Per un articolo sulla scelta delle tinte, una stanza che mostri chiaramente un colore può essere più utile di una persona con un pennello.

Uno schema semplice, un esempio reale o una foto del tuo lavoro può essere più pertinente di una foto stock. Adatta il tipo di immagine alla spiegazione: un confronto può richiedere due esempi affiancati, una guida una schermata del passaggio preciso. Una copertina decorativa può introdurre il tema, ma non sostituisce gli esempi necessari per capire le istruzioni.

Controlla il ritaglio su computer e telefono

Un’immagine larga può apparire molto diversa su un telefono. Il browser può tagliarne i lati, facendo sparire una persona, un prodotto o un dettaglio importante vicino al bordo.

Visualizza l’anteprima alla dimensione effettiva sulla pagina. Il soggetto principale deve restare visibile su entrambi gli schermi. Se il testo è sovrapposto, lascia dietro di esso una zona poco affollata per facilitarne la lettura. Se non c’è spazio adatto, metti il testo accanto all’immagine.

1. Inserisci l’immagine nella sezione in cui verrà usata. Includi titolo definitivo, pulsante e testo circostante, anziché valutare la foto da sola.
2. Controlla il layout della pagina in una vista ampia e una stretta. Cerca volti tagliati, dettagli mancanti e testo su zone troppo affollate.
3. Regola il taglio o la posizione del soggetto. Se l’editor offre un punto focale, spostalo sul dettaglio importante e ricontrolla l’anteprima.
4. Apri la pagina su un telefono. Il significato dell’immagine e le indicazioni essenziali devono essere chiari alla dimensione visualizzata.

Se un solo ritaglio non funziona in entrambe le dimensioni, il sito potrebbe aver bisogno di tagli diversi per schermi diversi. La guida MDN alle immagini responsive spiega questo approccio, chiamato art direction, a chi realizza la pagina.

Usa le foto stock con criterio

Le foto stock sono utili quando non hai un’immagine tua adatta. Prima di scegliere, chiediti:

• È chiaramente collegata a questa attività o a questo servizio?
• Sembra naturale e credibile?
• La stessa foto potrebbe comparire sul sito di quasi qualsiasi concorrente?

Se l’immagine sembra generica, cerca un’alternativa più precisa o usa una vera foto del tuo lavoro, dei prodotti, dei locali o del team. Le foto proprie possono aiutare a capire cosa aspettarsi.

Una foto stock può illustrare un argomento generale o creare un’atmosfera. È meno adatta per mostrare il tuo vero team, i tuoi locali o lavori completati. Non presentarla come prova di un progetto che hai realizzato. Una foto stock pertinente può comunque essere migliore di una tua foto troppo scura, poco chiara o distraente per svolgere il suo compito.

Mantieni uno stile visivo coerente

Immagini provenienti da fonti diverse possono stare bene insieme. Cerca una qualità comune, come luce naturale, una palette simile o uno stile fotografico costante.

Non devi applicare lo stesso trattamento a ogni foto. Punta a una pagina armoniosa in cui ogni immagine sia adatta alla propria sezione.

Inizia con due o tre regole: inquadrature simili per i ritratti, un taglio uniforme per le copertine del blog e luce naturale per i progetti. Guarda le immagini insieme sulla pagina. Sostituisci quella che stona prima di applicare un filtro pesante all’intera raccolta.

Controlli prima della pubblicazione

• Sai spiegare cosa aggiunge l’immagine alla sezione.
• Rappresenta correttamente l’attività, l’argomento o l’esempio mostrato.
• Il soggetto principale resta visibile nei layout effettivi su computer e telefono.
• Testo e pulsanti sono leggibili e le informazioni essenziali sono disponibili anche nel testo della pagina.
• Luce, inquadratura o colori si accordano con le immagini vicine.
• Hai verificato il permesso d’uso e le eventuali attribuzioni richieste dalla fonte.

Prepara le immagini scelte per il sito

Dopo la scelta, usa le nostre guide per trovare le dimensioni adatte, ridimensionare senza deformare e scrivere testi alternativi e nomi di file utili.

Pensa anche a come trasmettere l’informazione a chi non vede l’immagine. Le immagini significative richiedono un’alternativa testuale adeguata; quelle puramente decorative hanno in genere un testo alternativo vuoto. Il tutorial del W3C sulle immagini spiega come lo scopo dell’immagine determina questa scelta.