Come dimensionare e posizionare le foto in un articolo con testo e immagini
Per un articolo leggibile, dimensiona ogni foto in base alla sua funzione: dai a un'immagine che contiene prove chiave o contesto lo spazio necessario per essere vista bene, e mantieni più piccola un'immagine di supporto quando il testo circostante spiega già il concetto. Posizionala accanto al passaggio che chiarisce, preserva un ordine di lettura chiaro e controlla il layout su schermi stretti. Questa guida si concentra sulla disposizione delle foto in un articolo digitale; le stesse scelte guidate dallo scopo possono orientare un layout per la stampa, ma il comportamento su schermo richiede una verifica a parte.
Inizia con la funzione della foto
Prima di spostare o ridimensionare una foto, decidi cosa dovrebbe trarne il lettore. È una prova da esaminare, un esempio che rende un passaggio più facile da visualizzare o una decorazione? Questa distinzione è più utile rispetto al partire da una larghezza dell'immagine predefinita.
Se la foto veicola informazioni che il testo non contiene, dalle abbastanza spazio affinché il dettaglio rilevante sia leggibile. Una piccola immagine di un documento, di un oggetto o di un processo può fallire nel suo compito principale se il lettore non può esaminarla. Se la foto illustra semplicemente un punto già spiegato nel testo, una dimensione più contenuta può essere sufficiente, oppure l'immagine potrebbe non essere necessaria. Questa è una regola pratica di design dedotta dallo scopo della foto, non uno standard dimensionale universale. Le linee guida sulle immagini del GOV.UK Design System affermano allo stesso modo che le immagini dovrebbero soddisfare un'esigenza reale dell'utente e fungere da ausili visivi, mentre le informazioni necessarie dovrebbero rimanere disponibili in forma scritta. Le sue raccomandazioni sono scritte per i servizi online governativi, quindi considerale come un utile riferimento piuttosto che come un insieme di regole per ogni tipo di articolo.
Un utile supporto decisionale consiste nell'assegnare a ciascuna foto uno di questi tre ruoli: esaminare, illustrare o decorare. "Esaminare" di solito richiede una visualizzazione più ampia e una spiegazione o una didascalia che diriga l'attenzione sul dettaglio rilevante. "Illustrare" può spesso collocarsi a una dimensione moderata vicino al paragrafo che supporta. "Decorare" non ha alcun compito informativo; valuta se ometterla o mantenerla visivamente discreta. Queste categorie rappresentano uno strumento pratico di editing, non una terminologia prescritta dalle fonti.
Scegli le dimensioni in base all'importanza e allo spazio disponibile
Usa la colonna di testo dell'articolo come limite di partenza. Una foto che occupa l'intera larghezza della colonna è facile da notare e dà più spazio ai contenuti dettagliati; riserva questo trattamento alle immagini la cui importanza giustifica la pausa visiva. Una foto più piccola, allineata alla colonna, può supportare un punto vicino senza competere con il titolo o il testo. Evita di scegliere una dimensione solo perché il file originale è grande: le dimensioni visualizzate dovrebbero adattarsi al layout e alle informazioni che i lettori devono vedere.
Ecco una decisione a scopo illustrativo, non un modello testato: supponiamo che una colonna di contenuti larga 700 pixel contenga una foto che mostra un oggetto diviso in due parti la cui differenza è fondamentale per il passaggio. Una visualizzazione vicina alla larghezza dell'intera colonna può rendere più facile il confronto. Se la stessa foto serve solo a definire una scena generale e il paragrafo contiene la spiegazione, una visualizzazione più stretta può preservare l'enfasi sul testo. La cifra di 700 pixel è semplicemente un esempio di larghezza di colonna; non è uno standard raccomandato.
Quando una foto compare accanto al testo su uno schermo ampio, trattali come un'unità accoppiata. Dai all'immagine una larghezza sufficiente per mostrare il suo soggetto e al testo abbastanza spazio per rimanere agevole da leggere. Se l'uno o l'altro risulta sacrificato, impilali verticalmente invece di rimpicciolire la foto e comprimere il testo in una striscia stretta. Sugli schermi più piccoli, una sequenza a colonna singola è spesso la disposizione più chiara: testo, poi la relativa foto, poi il passaggio successivo. La spiegazione del WCAG 2.2 Reflow del W3C descrive come molte pagine di articoli possano adattarsi a una singola colonna e spiega l'obiettivo di evitare lo scorrimento bidirezionale per i normali contenuti di lettura. Segnala inoltre eccezioni per i contenuti il cui significato o utilizzo richiede un layout bidimensionale. Il punto, per il layout di un articolo, è assicurarsi che l'accoppiamento immagine-testo non costringa i lettori a scorrere lateralmente per seguire il testo.
Posiziona ogni foto dove il suo collegamento è evidente
Colloca la foto vicino alla frase o al paragrafo che spiega perché si trova lì. Se i lettori devono scorrere oltre diversi paragrafi non correlati per trovare l'immagine, il suo legame potrebbe risultare poco chiaro. Allo stesso modo, una foto grande inserita nel mezzo dell'argomentazione di una frase può interrompere la logica. Una collocazione pulita è di solito dopo il primo passaggio che introduce l'argomento, o direttamente prima di un passaggio in cui l'immagine è necessaria.
Usa una didascalia quando aggiunge qualcosa di specifico: identifica il soggetto, evidenzia un dettaglio o spiega perché l'immagine è importante. Non usare la didascalia per ripetere parola per parola la frase circostante. Se la foto richiede un attento esame, indica cosa guardare sia nel testo vicino che nella didascalia; i lettori non dovrebbero dover dedurre il senso unicamente dalla posizione.
La relazione tra una foto e il suo testo è fondamentale anche per la lettura non visiva. L'Images Tutorial del W3C afferma che le immagini informative necessitano di alternative testuali che trasmettano le loro informazioni essenziali, mentre le immagini decorative possono utilizzare un'alternativa vuota affinché le tecnologie assistive possano ignorarle. Le linee guida sulle immagini informative del W3C sottolineano che l'alternativa testuale dovrebbe esprimere il significato dell'immagine nel contesto, non limitarsi a elencare gli oggetti visibili. Come controllo pratico, chiediti: se qualcuno non potesse vedere questa foto, quali informazioni perderebbe? Inserisci le informazioni essenziali nel testo dell'articolo e fornisci un'alternativa testuale appropriata per l'immagine. Se l'immagine non aggiunge nulla oltre al testo adiacente, ripetere la sua descrizione potrebbe non essere necessario.
Preserva la forma utile della foto
Le proporzioni di una foto (aspect ratio) — ovvero il rapporto tra la sua larghezza e la sua altezza — influiscono sullo spazio che occupa e su ciò che rimane visibile. Inizia adattando l'intera foto all'interno dell'area prescelta. Ritagliala solo quando il soggetto rimane chiaro e il ritaglio non rimuove dettagli necessari al lettore. Un ritaglio orizzontale può adattarsi a un'immagine principale larga; un'immagine verticale può funzionare meglio a una larghezza più contenuta all'interno della colonna. Queste sono scelte compositive, non prescrizioni fisse.
Se un ritaglio rimuove contesto, cambia il significato apparente o nasconde un dettaglio discusso nell'articolo, usa un ritaglio diverso o mostra le proporzioni originali. Per diagrammi, etichette o documenti, ispeziona la dimensione finale di visualizzazione: il testo incorporato in una foto può diventare troppo piccolo per essere letto. Le linee guida sulle immagini del GOV.UK sconsigliano in genere di inserire testo all'interno delle immagini perché può essere difficile da leggere, copiare, ridimensionare o fruire con uno screen reader; quando il testo è essenziale per l'immagine, fornisci il significato anche nel contenuto scritto vicino.
Controlla il layout alle dimensioni utilizzate dai lettori
Visualizza l'anteprima dell'articolo alla larghezza ampia di un desktop e a quella stretta di un dispositivo mobile. Verifica che la foto non fuoriesca dalla colonna di testo, non copra i contenuti o non lasci il testo compresso accanto ad essa. Segui la sequenza di lettura dal titolo al paragrafo alla foto: quando il layout si impila in verticale, l'immagine dovrebbe comunque apparire vicino al passaggio che spiega. Controlla anche le didascalie e qualsiasi dettaglio importante nell'immagine alle dimensioni effettive di visualizzazione.
Per le pagine web, le dimensioni di visualizzazione e il peso del file sono decisioni separate. Un file di origine grande può essere necessario per uno schermo ampio, ma inviare file immagine inutilmente pesanti a schermi più piccoli può sprecare dati. La guida di web.dev alle immagini reattive spiega come i browser possano selezionare tra diverse dimensioni di immagine in base alle condizioni del display, evidenziando che non esiste un unico numero corretto di versioni dell'immagine. Si tratta di indicazioni pratiche di implementazione per la pubblicazione su web; non determinano la posizione corretta dell'immagine all'interno dell'articolo.
Una rapida sequenza decisionale
Definisci la funzione. La foto deve essere esaminata, deve illustrare il testo o serve solo a decorare la pagina?
Trova il suo punto di ancoraggio. Identifica il passaggio che la introduce o dipende da essa, quindi posiziona la foto accanto a quel passaggio.
Imposta la larghezza di visualizzazione. Dai abbastanza spazio alle prove chiave; lascia che una foto di supporto occupi meno spazio se i dettagli non sono essenziali.
Controlla il ritaglio. Mantieni visibili il soggetto e tutto il contesto rilevante.
Leggi il layout ad alta voce in sequenza. Su uno schermo stretto, conferma che il testo e la foto compaiano ancora in un ordine sensato e che il testo rimanga leggibile.
Descrivi le informazioni. Aggiungi una didascalia quando è utile e fornisci un'alternativa testuale basata sul ruolo dell'immagine.
La regola pratica è semplice: lascia che l'importanza determini la rilevanza visiva, che il testo correlato determini il posizionamento e che l'anteprima su schermo stretto riveli se la disposizione funziona ancora. Se la foto è difficile da comprendere alla dimensione scelta, ingrandiscila, semplifica il ritaglio o spiega il dettaglio rilevante nel testo.