Salta al contenuto principale

Carica immagine

Trascina un'immagine qui

Markdown

![immagine](URL_IMMAGINE)

HTML <img>

<img src="URL_IMMAGINE" alt="immagine">

Base64 Inline Markdown

Carica un'immagine per generare il tag base64 inline.

Come utilizzare Image to Markdown

Carica o trascina un'immagine

Usa la zona di trascinamento per caricare un file PNG, JPG, WebP o GIF. Puoi anche cliccare "Seleziona file" per scegliere l'immagine dal filesystem. Il file viene elaborato interamente nel browser, senza invio a server esterni.

Configura alt text, URL e opzioni di visualizzazione

Inserisci il testo alternativo (fondamentale per accessibilita' e SEO), l'URL pubblico dell'immagine e, opzionalmente, larghezza, altezza e allineamento. L'alt text viene pre-compilato dal nome del file per velocizzare il lavoro.

Copia il tag Markdown, HTML o Base64

Lo strumento genera tre output in tempo reale: sintassi Markdown standard (![alt](url)), tag HTML <img> con attributi completi e inline base64 Markdown (utile per file autonomi senza dipendenze esterne). Clicca il pulsante "Copia" accanto al formato desiderato.

Suggerimenti

  • Per le immagini pubbliche su GitHub, usa il link "raw" del file (raw.githubusercontent.com/...) invece del link alla pagina del repository: solo il raw link e' direttamente incorporabile in Markdown senza reindirizzamenti. Per immagini nei README, il percorso relativo al repository (es. ./assets/screenshot.png) e' spesso la scelta migliore.
  • Quando importi immagini in strumenti come Notion o Confluence, preferisci il tag HTML con larghezza esplicita (es. width="800") per evitare che le immagini grandi occupino tutto lo spazio disponibile. Molte piattaforme ignorano l'attributo CSS ma rispettano width/height HTML.
  • Per documentazione tecnica con immagini frequenti, considera di organizzare i file in una cartella /assets o /images nel repository e di usare percorsi relativi invece di URL assoluti: il Markdown rimarra' funzionante anche se il repository viene forkato o spostato.

Domande frequenti

Quando usare il tag base64 inline invece dell'URL?

Il base64 inline incorpora l'immagine direttamente nel testo Markdown, eliminando la dipendenza da un URL esterno. E' utile per file README standalone su GitHub (dove l'immagine potrebbe non essere raggiungibile), email HTML e documenti Markdown esportati come PDF. Lo svantaggio e' che la stringa base64 e' molto lunga e appesantisce il file: usarla solo per immagini piccole (icone, logo) o quando la portabilita' e' critica.

Come scrivere un buon alt text per le immagini?

L'alt text deve descrivere il contenuto e lo scopo dell'immagine, non l'aspetto estetico. Per un grafico: "Grafico a barre: confronto vendite Q1 vs Q2 2024" invece di "immagine grafico". Per un logo: "Logo Azienda X". Per immagini decorative senza contenuto informativo, usa alt="" (vuoto). Un buon alt text migliora l'accessibilita' (screen reader), la SEO e il fallback visivo quando l'immagine non si carica.

Il tag HTML generato e' diverso da quello Markdown?

Si'. La sintassi Markdown ![alt](url) e' supportata da GitHub, GitLab, Obsidian, Notion e la maggior parte dei processori Markdown, ma non consente di specificare dimensioni o allineamento. Il tag HTML <img src="..." alt="..." width="..." style="..."> offre controllo completo e funziona sia in Markdown (la maggior parte dei renderer accetta HTML inline) che in siti web. Usa Markdown per semplicita', HTML quando hai bisogno di dimensioni precise o allineamento.

I file caricati vengono inviati a qualche server?

No. L'elaborazione avviene interamente nel browser tramite l'API FileReader di JavaScript. Le immagini non vengono inviate a nessun server. Anche la codifica base64 viene eseguita localmente. Puoi verificarlo disabilitando la connessione di rete: lo strumento funziona ugualmente in modalita' offline.

Perche' impostare larghezza e altezza non ridimensiona l'anteprima dell'immagine?

L'anteprima mostra sempre il file caricato alle sue dimensioni originali per farti vedere l'immagine reale. I valori di larghezza e altezza vengono applicati solo agli attributi width/height del tag HTML generato, effettivi quando quel tag verra' usato altrove (sito, README, documento).