Come aggiungere un'immagine in Markdown:punto esclamativo, testo alternativo, percorso.

La sintassi

![Alt text](path/to/image.png "Optional title")

• Il testo alternativo tra parentesi quadre descrive l'immagine a chi usa un lettore di schermo e compare se l'immagine non si carica. Scrivi cosa mostra la foto, non "immagine".
• Il percorso va tra parentesi tonde. Se contiene spazi, scrivili come %20 oppure racchiudi il percorso tra parentesi angolari.
• Il titolo è un testo facoltativo tra virgolette, di solito mostrato come suggerimento al passaggio del cursore.

Funziona anche lo stile a riferimento, che tiene gli indirizzi lunghi fuori dal testo:

![Logo][logo]

[logo]: https://example.com/logo.png "DotMD logo"

Percorsi relativi e dove si trova il file

Un percorso senza schema è relativo al file Markdown, non al punto in cui hai aperto l'app. Con i file organizzati così

docs/
  spec.md
  assets/
    flow.png

l'immagine in spec.md è ![Flusso](assets/flow.png). Da un file una cartella più su, scrivi docs/assets/flow.png, e da una cartella più giù, ../assets/flow.png. Su GitHub un percorso che inizia con / è relativo alla radice del repository. Tieni le immagini accanto al documento, in una cartella assets, così spostando la cartella si spostano anche le immagini.

I nomi dei file immagine distinguono maiuscole e minuscole sui server Linux anche se un Mac le ignora, ed è un motivo frequente per cui un'immagine funziona in locale e si rompe online.

Come impostare la dimensione dell'immagine

Markdown di per sé non ha una dimensione. Usa un tag HTML img con una larghezza; l'altezza segue le proporzioni:

<img src="assets/screen.png" alt="Settings window" width="400">

Larghezza e altezza sono in pixel, e una percentuale come width="50%" funziona nella maggior parte delle app. GitHub supporta questo tag nei README e nei commenti. Alcune app accettano anche una dimensione dentro il testo alternativo, come ![Screenshot|400](assets/screen.png). Quella forma viene da Obsidian e DotMD la legge, ma le altre app mostreranno |400 come parte del testo alternativo, quindi usa il tag HTML per un file che deve funzionare ovunque. In una cella di tabella, la barra verticale va scritta \|.

Allineamento e didascalie

Anche allineamento e didascalie sono HTML. Per centrare un'immagine, mettila in un paragrafo con align:

<p align="center">
  <img src="assets/logo.png" alt="Logo" width="200">
</p>

Per una didascalia usa un figure con un figcaption:

<figure>
  <img src="assets/flow.png" alt="Request flow" width="500">
  <figcaption>Figure 1. The request flow.</figcaption>
</figure>

Non tutte le app mantengono questi tag; GitHub lo fa per la maggior parte, e DotMD mostra entrambi. Se ti serve una didascalia che funzioni ovunque, metti invece una riga in corsivo sotto l'immagine: *Figura 1. Il flusso della richiesta.*.

Un'immagine cliccabile e altri trucchi

Metti l'immagine dentro un link per renderla cliccabile:

[![Build status](https://example.com/badge.svg)](https://example.com/builds)

È così che si costruiscono i badge in cima a un README. Per mostrare un'immagine diversa in modalità scura, usa un elemento picture con un <source media="(prefers-color-scheme: dark)">, dove l'app lo supporta.

Testo alternativo, dimensione dei file e formati

Scrivi il testo alternativo come se descrivessi l'immagine al telefono: Finestra delle impostazioni con l'opzione Sync attivata dice più di screenshot. Per un'immagine puramente decorativa, lascia vuote le parentesi così un lettore di schermo la salta.

Usa PNG per screenshot e diagrammi, JPEG per le foto, SVG per loghi e disegni al tratto, e tieni i file leggeri: uno screenshot da 6 MB rallenta un README e un repository. La maggior parte delle app mostra le GIF animate come qualsiasi altra immagine.

Perché l'immagine non compare

• Il percorso è sbagliato. Controllalo partendo dalla cartella del file Markdown e controlla le maiuscole del nome del file.
• Manca il punto esclamativo. Senza ottieni un link, non un'immagine.
• Uno spazio nel percorso senza escape.
• Un file locale in una pagina online. Un percorso verso un file sul tuo disco funziona solo sul tuo disco.
• Un'immagine remota bloccata. Alcune app non caricano le immagini dal web finché non lo consenti.

Per vedere come apparirà un'immagine, apri il file in un lettore che risolve i percorsi relativi al documento. DotMD lo fa: le immagini non superano la larghezza della colonna di testo, il tag HTML della larghezza è rispettato e uno screenshot incollato nell'editor viene salvato in una cartella assets accanto al file. La lettura è gratuita.

Domande sulle immagini in Markdown

Altre domande