Immagini inline: Regole ed esempi

Un’immagine inline è un’immagine singola inserita nel flusso di lettura per chiarire o dimostrare il punto immediatamente circostante. Non è una galleria, un pannello promozionale o un sostituto del testo. Chiediti cosa il lettore può comprendere o verificare dopo averla vista che le parole vicine non forniscono con la stessa efficienza.

La tacca chiave impedisce al connettore di entrare nella presa con l’orientamento sbagliato.

L’elemento visualizzato sopra segue immediatamente un paragrafo che dice al lettore di controllare l’orientamento del connettore. Il ritaglio rende visibile la tacca, la didascalia ne indica il significato e l’istruzione successiva può proseguire senza chiedere al lettore di decodificare una scena grande e non correlata.

Perché questo elemento è importante

I lettori alternano scansione e ispezione mirata. Un’immagine ben posizionata trasforma una descrizione astratta in una forma riconoscibile, mostra prove o riduce lo sforzo necessario per immaginare uno stato visivo. Il posizionamento implica che spiega il testo circostante. Quando questa relazione è debole, i lettori la ispezionano, non trovano significato aggiuntivo e devono ritrovare il loro punto di lettura.

Il principio psicologico rilevante è la segnalazione. Il ritaglio, la didascalia e il testo circostante dirigono l’attenzione verso il dettaglio che conta. Una fotografia di un’intera macchina è debole quando la frase riguarda una linguetta di blocco di due centimetri. Un ritaglio mirato di quella linguetta dà al lettore una domanda visiva a cui rispondere. L’immagine non ha bisogno di frecce o testo incorporato quando l’inquadratura da sola può rendere evidente il soggetto.

L’estraibilità automatica è la capacità del software di identificare un’unità e preservare la sua relazione con il significato circostante. Un <figure> semantico contenente un <img> e un opzionale <figcaption> fornisce a crawler, tecnologie assistive, strumenti di migrazione e sistemi di recupero AI un’unità stabile. Il testo alternativo dichiara cosa contribuisce l’immagine; le dimensioni descrivono la sua geometria; una didascalia espone interpretazione o provenienza al di fuori dei pixel.

Le macchine non devono aver bisogno della visione artificiale per recuperare un’istruzione, un numero, un avviso o una conclusione essenziale. Se un’immagine contiene una misurazione o un’etichetta decisiva, ripeti quell’informazione nel testo circostante o usa una tabella strutturata. Le regole di scrittura degli elementi controllano la sintassi delle direttive condivise, i percorsi delle fonti, la mappatura del corpo e la precedenza. Questa pagina ha precedenza per le decisioni sui campi delle immagini inline, dimensionamento, caricamento, didascalia e testo alternativo.

Quando usarlo

Usa un’immagine inline quando un singolo elemento visivo supporta direttamente un’idea vicina e l’immagine rimane utile alla larghezza della colonna di lettura. I compiti appropriati includono: mostrare un dettaglio fisico, identificare un luogo o un oggetto, presentare un semplice stato prima/dopo, fornire prova visiva di una condizione testata o dimostrare l’aspetto di un output che non richiede annotazioni.

Esegui tre test prima di aggiungerla:

1. Test del contributo: Nomina la nuova informazione, la prova o il riconoscimento che l’immagine fornisce.
2. Test del contesto: Identifica il paragrafo esatto che l’immagine supporta. Se tre sezioni potrebbero rivendicarla allo stesso modo, il suo scopo è probabilmente troppo ampio.
3. Test della rimozione: Nascondi l’immagine. Se non si perde nulla di significativo, contrassegnala come decorativa solo quando il design ne ha realmente bisogno; altrimenti rimuovila.

I casi limite causano la maggior parte degli usi impropri. Usa uno screenshot annotato quando i lettori devono individuare comandi o abbinare diverse regioni numerate. Usa un diagramma quando il contenuto è una relazione, una sequenza o un sistema piuttosto che un oggetto visibile. Usa una galleria quando più immagini pari devono essere sfogliate. Usa una tabella comparativa quando le differenze dipendono da criteri ripetuti. Usa un imagebox quando un’immagine e una spiegazione sostanziale formano un’unità autonoma a due colonne.

Non inserire una foto stock generica semplicemente per spezzare il testo. Una stretta di mano non dimostra una partnership; un laptop non spiega un software; una lampadina non rende un’idea più chiara. Non pubblicare testo come immagine per preservare la tipografia. Non usare uno screenshot per testo in prosa, un grafico senza valori leggibili o un’immagine di cui non si conoscono licenza e provenienza.

Dove posizionarlo

Posiziona l’immagine immediatamente dopo il paragrafo che introduce ciò che il lettore dovrebbe ispezionare. Il motivo viene prima così il lettore sa dove dirigere l’attenzione. Segui la figura con un’interpretazione solo quando l’immagine è una prova la cui conseguenza non è ovvia. In una procedura, posizionala dopo l’azione rilevante e prima del controllo di successo; non separare mai una frase dalla sua qualifica o un’istruzione dal suo avviso.

Un’immagine inline può trovarsi sotto un H2 solo quando il titolo e il primo paragrafo ne stabiliscono lo scopo. Mantieni insieme figura, didascalia e credito attraverso layout responsive e interruzioni di pagina.

Non posizionarla all’interno di un paragrafo, un elemento di elenco, una cella di tabella, un callout, un accordion, una scheda cliccabile o un altro elemento multimediale. Non mettere due immagini inline una di seguito all’altra: combina quelle veramente pari in una galleria o aggiungi la spiegazione che distingue i loro ruoli. Non può stare accanto a una tabella densa, un video, un grafico o un invito all’azione dove entrambi gli oggetti competono per l’attenzione. Mantieni almeno un paragrafo significativo tra unità multimediali separate, a meno che non formino un confronto esplicitamente definito.

Usa la larghezza normale del contenuto come impostazione predefinita e una presentazione più stretta per un oggetto piccolo o un ritratto. Usa un contenitore wide approvato solo quando il dettaglio non può essere letto altrimenti; non creare mai scrolling orizzontale a livello di pagina.

Anatomia

1. Confine della figura: Raggruppa la risorsa, la didascalia e il credito come un’unica unità nel flusso del documento.
2. Fonte dell’immagine: Si risolve in una risorsa approvata ed esistente, non in un hotlink remoto o un segnaposto.
3. Testo alternativo: Sostituisce la funzione contestuale dell’immagine per i lettori che non possono percepirla; è vuoto solo per decorazione.
4. Dimensioni intrinseche: Riservano il corretto rapporto d’aspetto prima che il file arrivi e prevengono movimenti del layout.
5. Candidati responsive: Permettono al browser di scegliere un file di dimensione appropriata invece di scaricare la fonte più grande ovunque.
6. Dimensione renderizzata: Mantiene il dettaglio rilevante leggibile senza traboccare o fare upscale di una fonte debole.
7. Didascalia: Aggiunge interpretazione, identificazione, data, scala o provenienza quando queste informazioni aiutano ogni lettore.
8. Credito: Registra creatore e fonte quando la licenza o la politica editoriale lo richiedono.

Il nome file dell’immagine e il testo alternativo non sono intercambiabili. Un nome file stabile aiuta la manutenzione delle risorse; il testo alternativo contestuale spiega lo scopo dell’immagine in questa occorrenza. La stessa fotografia può quindi avere testo alternativo diverso quando supporta punti diversi, sebbene riutilizzare un’immagine per punti non correlati sia un segnale d’allarme.

Esempi di design

L’elemento supporta tre varianti semantiche e due trattamenti di larghezza. Il comportamento di caricamento non è una variante visiva.

Immagine informativa, larghezza contenuto

Questa è l’impostazione predefinita. L’immagine contribuisce con dettaglio o prova riconoscibile, usa testo alternativo non vuoto e rimane all’interno del contenitore di lettura.

Immagine informativa, wide media

Usa il contenitore wide approvato solo quando una mappa, una fotografia dettagliata o un output leggibile necessitano di più spazio orizzontale. Il testo circostante mantiene comunque il significato e la presentazione mobile deve rimanere utilizzabile.

Immagine decorativa

La decorazione non porta informazioni uniche, usa alt="", non ha didascalia esplicativa e dovrebbe essere rara nei contenuti di produzione long-form. Non deve essere l’unica espressione di atmosfera, stato, identità o risultato.

Immagine di dettaglio con espansione opzionale

Usa l’espansione solo quando la resa inline normale stabilisce il contesto ma il dettaglio fine richiede una vista più grande. L’immagine stessa rimane comprensibile senza attivare il link, e il nome accessibile del controllo descrive l’azione.

Comportamento su viewport stretto

Ogni variante si riduce all’interno del viewport, preserva il rapporto d’aspetto e mantiene la didascalia attaccata. Se il testo significativo diventa illeggibile, fornisci un ritaglio mobile o sostituisci l’immagine con testo strutturato; forzare il pinch-to-zoom non è la soluzione predefinita.

Parametri

Il contratto memorizza le decisioni editoriali e di consegna. Bordi, ombre, spaziatura e valori di breakpoint appartengono al renderer.

La direttiva non ha un campo titolo: un’immagine inline appartiene alla sezione circostante anziché crearne una nuova. Il suo primo paragrafo del corpo corrisponde a caption; non è accettato un primo titolo. Il credito proviene dai metadati della risorsa fidati quando disponibili, impedendo agli autori di modificare silenziosamente le informazioni di licenza.

Sintassi ed esempi di codice

Le seguenti tre notazioni mappano la stessa fonte, testo alternativo, dimensioni intrinseche, dimensione, didascalia e intenzione di caricamento. I percorsi delle risorse di esempio dimostrano il contratto solo; la fonte di produzione deve risolversi in un file esistente.

Direttiva Markdown portabile

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Primo piano del connettore che mostra la tacca chiave allineata con la cresta della presa corrispondente" width=1600 height=1000 size=content loading=lazy}
La tacca chiave permette l'inserimento in un solo orientamento.
:::

Il primo paragrafo è la didascalia. Paragrafi aggiuntivi, titoli, elenchi, pulsanti e media annidati sono respinti perché trasformerebbero una figura mirata in un contenitore di contenuti generico.

Shortcode Hugo

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Primo piano del connettore che mostra la tacca chiave allineata con la cresta della presa corrispondente" width="1600" height="1000" size="content" loading="lazy" >}}
La tacca chiave permette l'inserimento in un solo orientamento.
{{< /inline-image >}}

I parametri nominati sono usati esclusivamente. Questa è una specifica di adattatore portabile, non un’affermazione che uno shortcode locale sia registrato. Finché l’adattatore non esiste, usa l’implementazione di figura semantica stabilita del sistema di pubblicazione; non aggiungere mai una chiamata shortcode non funzionante ai contenuti di produzione.

Blocco WordPress

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Primo piano del connettore che mostra la tacca chiave allineata con la cresta della presa corrispondente"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">La tacca chiave permette l'inserimento in un solo orientamento.</figcaption>
</figure>
<!-- /wp:image -->

Usa i metadati della libreria multimediale ma verifica il testo alternativo contestuale per questo posizionamento. Non collegare alla pagina dell’allegato per impostazione predefinita.

Esempi

Buono: un’immagine mirata risponde alla domanda visiva

Una guida all’installazione dice: “Prima di applicare alimentazione, allinea la tacca chiave con la cresta della presa; forzare il connettore può piegare i pin.” Poi posiziona questa figura:

La tacca e la cresta si allineano prima che la linguetta di blocco possa innestarsi.

Funziona perché l’immagine arriva dopo il motivo per ispezionarla, il ritaglio contiene entrambe le caratteristiche corrispondenti e la didascalia spiega la relazione invece di dire “immagine del connettore”. L’istruzione e la conseguenza rimangono nel testo. Le dimensioni intrinseche prevengono movimenti durante il caricamento e l’immagine può essere caricata in lazy loading perché appare ben al di sotto del primo viewport.

Cattivo: la decorazione interrompe senza spiegare

Un articolo sulla configurazione di analytics inserisce una foto stock a tutta larghezza di una persona che osserva grafici colorati tra un passaggio e il suo avviso. Il suo testo alternativo dice “analytics dashboard SEO optimization reporting data”, la fonte è larga 5000 pixel, nessuna dimensione è dichiarata e il file si carica eager a metà pagina.

L’immagine è cattiva perché non prova alcuno stato di configurazione, separa un’azione rischiosa dal suo avviso, inserisce parole chiave nel testo alternativo, scarica più pixel di quanti il layout possa utilizzare e potrebbe spostare l’avviso quando la sua altezza diventa nota. Rimuovila. Se l’interfaccia reale contiene un controllo ambiguo, sostituiscilo con uno screenshot mirato e attuale e mantieni l’avviso collegato all’azione.

Marcatura Schema e accessibilità

Un’immagine inline non crea alcuna entità schema speciale per impostazione predefinita. Un’immagine significativa può fornire la proprietà image di Article, HowTo, Product, Review o un’altra entità appropriata. Usa ImageObject solo con un contentUrl stabile e metadati disponibili veritieri come didascalia, dimensioni, creatore e licenza. Non marcare decorazioni o diritti non verificati.

Un buon testo alternativo descrive la funzione nel contesto, non ogni oggetto visibile. Chiediti quale frase sostituirebbe l’immagine se non riuscisse a caricarsi. “Primo piano del connettore che mostra la tacca chiave allineata con la cresta della presa corrispondente” è utile in una guida all’installazione. “Un oggetto nero e argento su sfondo grigio” è visivamente letterale ma funzionalmente debole. Evita “immagine di” e “foto di” a meno che il mezzo stesso non sia rilevante, come distinguere una fotografia da una simulazione.

Ogni <img> necessita di un attributo alt. Usa testo non vuoto per immagini informative e alt="" per decorazione. Omettere l’attributo non è equivalente: alcuni screen reader annunciano il nome file. Non mettere testo essenziale di prosa, istruzioni, citazioni o serie di dati lunghe all’interno dei pixel. Se il testo visibile nell’immagine è importante, ripetilo nel contenuto circostante.

Usa <figure> e <figcaption> quando una didascalia appartiene all’immagine. Non aggiungere un ruolo figure manualmente. Un’immagine espandibile necessita di un controllo visibile e azionabile da tastiera con un nome descrittivo, movimento del focus prevedibile, supporto del tasto Escape quando apre un modale e accesso allo stesso testo alternativo e didascalia a dimensione ingrandita. Non avvolgere ogni immagine in un link non etichettato al file sorgente.

La distribuzione responsive fa parte della SEO delle immagini e dell’accessibilità perché rende i contenuti disponibili senza ritardi inutili. Usa srcset e sizes o una pipeline di immagini equivalente in modo che il design responsivo possa selezionare un candidato adatto. Preserva il rapporto d’aspetto, imposta width e height intrinseci e vincola la larghezza massima renderizzata al suo contenitore. Queste dimensioni riservano spazio e riducono il Cumulative Layout Shift , lo spostamento del contenuto della pagina durante il caricamento delle risorse.

Il Lazy loading posticipa una risorsa fuori schermo fino a quando il lettore si avvicina. Usa loading="lazy" per le immagini al di sotto del viewport iniziale. Non caricare in lazy loading un’immagine che probabilmente apparirà immediatamente, perché il ritardo può far arrivare più tardi il più grande contenuto visibile. Usa eager loading e fetchpriority="high" solo quando la misurazione e la posizione del template identificano l’immagine come probabile risorsa primaria sopra la piega; più immagini ad alta priorità annullano il segnale.

Regole di scrittura

La scrittura intorno a un’immagine inline fa la maggior parte del lavoro interpretativo, quindi la brevità nell’elemento non significa vaghezza.

• Introduci il motivo prima della figura in un paragrafo vicino. Non usare linguaggio di coordinate come “sotto” quando layout responsive o sindacati possono spostare la risorsa.
• Scrivi testo alternativo informativo per la funzione dell’immagine in questo esatto contesto. Punta a 40–160 caratteri; usa fino a 250 solo quando la complessità lo richiede genuinamente.
• Mantieni le didascalie tra 5 e 30 parole e una frase quando possibile. Identifica, interpreta, data, scala o accredita l’immagine; non limitarti a ripetere il testo alternativo.
• Mostra un soggetto o una relazione principale. Se il lettore deve ispezionare più di tre aree indipendenti, usa uno screenshot annotato, un diagramma, una tabella o una galleria.
• Usa l’ortografia italiana, linguaggio semplice e la stessa terminologia della sezione circostante. Il testo alternativo non è un campo per parole chiave.
• Mantieni tutte le istruzioni essenziali, avvisi, misurazioni, prezzi, date e conclusioni in testo HTML, anche quando appaiono anche nei pixel.
• Non posizionare mai titoli, paragrafi multipli, elenchi, tabelle, pulsanti, moduli, video, audio o un’altra immagine all’interno del corpo dell’elemento.
• Non usare mai una didascalia vuota per creare spazio, un credito inventato, un hotlink remoto, una risorsa senza licenza, dati del cliente senza permesso o un percorso segnaposto inesistente.
• Non allungare, distorcere o fare upscale di un’immagine per riempire uno spazio di design. Ritaglia solo quando il ritaglio preserva la prova e il contesto di cui il testo discute.

Tipi di post che lo utilizzano

L’array postTypes nel frontmatter è l’unione canonica. Un tipo di post può restringere il requisito, ma non modifica il contratto di campo o accessibilità dell’elemento.

Checklist QA

• Scopo: Il revisore può indicare l’informazione unica, la prova o il riconoscimento che l’immagine aggiunge.
• Posizionamento: Il paragrafo precedente stabilisce cosa ispezionare e nessun avviso, qualifica o citazione è stato separato dalla sua affermazione.
• Elemento corretto: Un’immagine inline singola è più appropriata di uno screenshot annotato, galleria, diagramma, tabella o imagebox.
• Validità della risorsa: La fonte esiste, usa un formato approvato e un percorso relativo alla root e ha diritti e provenienza verificati.
• Privacy: L’immagine non contiene dati del cliente non approvati, nomi, indirizzi email, token, dettagli del browser o indizi sulla posizione.
• Ritaglio e qualità: Il soggetto rimane leggibile alle larghezze renderizzate e mobile senza distorsione, spazio vuoto evitabile o compressione distruttiva.
• Testo alternativo: L’attributo alt è presente ed è contestualmente informativo o intenzionalmente vuoto per decorazione; non è un nome file, un duplicato della didascalia o un elenco di parole chiave.
• Didascalia: Quando presente, aggiunge identificazione, interpretazione, data, scala o provenienza in 5–30 parole.
• Dimensioni: Larghezza e altezza intrinseche corrispondono al rapporto della fonte e riservano spazio stabile per il layout.
• Distribuzione responsive: Le dimensioni dei candidati corrispondono a larghezze di schermo realistiche; la fonte più grande non viene inviata a ogni viewport per impostazione predefinita.
• Caricamento: Le immagini sotto la piega sono caricate in lazy loading; le immagini inizialmente visibili no; l’alta priorità di fetch è limitata a un candidato primario misurato.
• Comportamento mobile: L’immagine si adatta senza scrolling orizzontale a livello di pagina e i suoi dettagli significativi rimangono leggibili senza zoom forzato.
• Testo di riserva: Istruzioni essenziali, avvisi, misurazioni e conclusioni esistono nel testo della pagina piuttosto che solo nei pixel.
• Dati strutturati: Eventuali proprietà schema sono accurate, supportate da contenuto visibile e omesse per decorazione.
• Parità portabile: Markdown, Hugo e WordPress preservano la stessa fonte, testo alternativo, dimensioni, didascalia, credito e intenzione di caricamento.
• Capture in sospeso: Nessun percorso inesistente viene renderizzato; ogni esempio richiesto rimane un commento SCREENSHOT mentre screenshotsPending = true.

FAQ

Il template dell’academy renderizza le cinque domande esaminate memorizzate nel frontmatter [[faq]] di questa pagina. Coprono testo alternativo, lazy loading, didascalie, dimensionamento e la decisione di rimuovere un’immagine che non aggiunge nulla.