Come aggiungere immagini in Markdown

Quando visiti un sito web, avrai sicuramente notato che le immagini rendono le pagine più coinvolgenti e visivamente gradevoli. Se il contenuto fosse composto solo da testo, apparirebbe monotono e poco interessante. Gli elementi visivi aiutano gli utenti a comprendere e ricordare meglio le informazioni, rendendo allo stesso tempo l’interfaccia più intuitiva.

Markdown è un linguaggio di markup semplice e facile da usare, pensato per creare contenuti testuali con il minimo sforzo. È ampiamente utilizzato per la documentazione, gli articoli e i post dei blog. Markdown permette anche di aggiungere immagini al testo, che svolgono un ruolo fondamentale nel rendere i contenuti più chiari e memorabili.

Metodi principali per aggiungere immagini

Esistono due metodi principali per inserire immagini in Markdown: immagini locali e link esterni.

Immagini locali

Per inserire immagini archiviate localmente, è essenziale specificare correttamente il percorso del file. Si consiglia di salvare le immagini nella stessa cartella del file Markdown o allo stesso livello gerarchico.

Se l’immagine si trova nella stessa directory del file .md, basta indicarne il nome:

• 

Se l’immagine si trova in una sottocartella (ad esempio /img):

• 

Il testo tra parentesi quadre ([Computer]) è il testo alternativo (alt-text). Viene mostrato se l’immagine non può essere caricata ed è utilizzato dai lettori di schermo per descrivere l’immagine agli utenti ipovedenti.

Il percorso dell’immagine va inserito tra parentesi tonde. Assicurati che il percorso sia corretto per evitare problemi di visualizzazione dopo il caricamento su un server.

Immagini esterne

Per inserire un’immagine ospitata su Internet, utilizza il suo URL:

• 

Vantaggi delle immagini esterne:

• Risparmio di spazio nel repository

• Comodo se le immagini vengono aggiornate frequentemente

Svantaggi:

• Dipendenza dalla fonte esterna

• Se l’immagine viene rimossa o l’URL cambia, non verrà più visualizzata

Dimensioni dell’immagine

Il Markdown standard non supporta la modifica delle dimensioni delle immagini (tranne in piattaforme come GitHub che integrano funzionalità aggiuntive). Puoi però utilizzare l’HTML:

• <img src="/img/computer.png" alt="Computer" width="500" height="300">

Formattazione avanzata

La formattazione avanzata aiuta a mettere in risalto i contenuti e a renderli più leggibili.

Didascalia

Le didascalie offrono informazioni aggiuntive al lettore:

• 

Immagine cliccabile

Per creare un’immagine cliccabile che rimandi a un’altra risorsa, avvolgi la sintassi dell’immagine in un link:

• [](https://site)

Alt-text efficace

L’alt-text deve descrivere chiaramente il contenuto dell’immagine.

Alt-text non corretto:

• 

Alt-text corretto:

• 

Perché l’alt-text è importante?

Accessibilità:
Gli utenti ipovedenti che utilizzano lettori di schermo dipendono dal testo alternativo.

SEO:
I motori di ricerca indicizzano l’alt-text, migliorando la visibilità dei tuoi contenuti.

Consigli per lavorare con le immagini

• Utilizza immagini con la dimensione più ridotta possibile per velocizzare il caricamento della pagina.

• Ottimizza le immagini prima di caricarle online.

• Assicurati che l’alt-text sia unico e accurato.

• Dai ai file un nome rilevante e contenente parole chiave.
  Esempio: invece di img123.png, usa computer-setup.png.

Metodi per inserire immagini — Tabella comparativa

Conclusione

Ora sai come inserire immagini in Markdown, controllarne le dimensioni, aggiungere didascalie e migliorare l’accessibilità tramite l’alt-text. Le immagini rendono il testo più visivo e aiutano i lettori a comprendere meglio le informazioni.

Scopri anche le nostre soluzioni di hosting WordPress affidabili e ad alte prestazioni per i tuoi siti WordPress.