Cheat sheet completo sintassi Markdown immagini 2026: GitHub, Notion, HackMD, Obsidian
Non hai tempo? Ecco il succo in tre righe
- La sintassi base è
— universale. - Il ridimensionamento cambia da piattaforma a piattaforma — è lì che inciampano tutti.
- L'URL deve essere un link diretto pubblico — niente link di condivisione Google Drive.
Sotto, la cheat sheet completa.
Sintassi base: ovunque funziona
testo alternativo: appare se l'immagine non carica; letto dagli screen reader.URL immagine: deve essere un file immagine direttamente accessibile.
Con titolo (mostrato al hover):
Sintassi reference-style (utile per immagini riutilizzate):
![testo alternativo][logo]
[logo]: https://example.com/image.png "titolo"
Ridimensionamento per piattaforma
Il campo minato. Ho testato cinque piattaforme popolari — ognuna ha sintassi sua.
| Piattaforma | Sintassi dimensione | Esempio |
|---|---|---|
| GitHub | Non supporta Markdown, richiede HTML | <img src="url" width="300"> |
| HackMD | Aggiunge =WxH dopo URL |
 |
| Notion | Drag UI, nessuna sintassi | Trascini il bordo dopo upload |
| Obsidian | Nell'alt: ` | widtho |
| Typora | HTML o zoom in style |
<img src="url" style="zoom:50%"> |
GitHub
Il renderer Markdown di GitHub non supporta sintassi dimensione. Unica soluzione, HTML:
<img src="https://example.com/image.png" width="400" alt="descrizione">
GitHub accetta width, height, align sul tag <img>. style viene filtrato per sicurezza.
HackMD
Estensione proprietaria con =WxH dopo URL:
Solo larghezza (altezza proporzionale):
Sintassi specifica HackMD — non funziona altrove.
Obsidian
Dimensione nell'alt text:
Obsidian supporta anche i wikilink per immagini interne al vault:
![[image.png|300]]
Molto comodo per chi costruisce wiki personali, diari di studio o appunti universitari in Obsidian — diffuso tra studenti di ingegneria italiani e ricercatori che documentano progetti.
Notion
Il Markdown import di Notion supporta la sintassi base, ma il ridimensionamento avviene solo tramite UI (drag del bordo). Nessuna sintassi dimensione.
Dettaglio importante: Notion riupla automaticamente le immagini esterne sul proprio CDN (prod-files-secure.s3.us-west-2.amazonaws.com). Quindi la sorgente originale non influenza la velocità di caricamento in Notion, ma nemmeno puoi aggiornare l'immagine modificando la sorgente — serve reupload.
Per chi gestisce documentazione interna in aziende italiane su Notion, questo ha un effetto collaterale: i dati (anche immagini sensibili) vengono replicati su server US. Per compliance GDPR di progetti sensibili, Obsidian + Git privato è spesso preferibile.
Typora
Editor WYSIWYG per Markdown — popolare tra chi scrive libri tecnici in italiano. Supporta HTML inline e la proprietà CSS zoom:
<img src="https://example.com/image.png" style="zoom:50%;">
Esporta in PDF e HTML pulito, utile per produrre whitepaper o tesi.
Compatibilità tra sorgenti immagini
Non ogni URL funziona su ogni piattaforma.
| Sorgente | GitHub | HackMD | Notion | Obsidian | Typora |
|---|---|---|---|---|---|
| Image host diretto (lpic.cc, ImgBB) | OK | OK | OK | OK | OK |
| Immagine dentro repo GitHub | OK | OK | OK | Config | OK |
| Google Drive link condivisione | ✗ | ✗ | Riuplo auto | Instabile | ✗ |
| Dropbox link condivisione | ✗ | ✗ | Riuplo auto | Instabile | ✗ |
| Base64 inline | OK | OK | ✗ | OK | OK |
Take-away: i link di condivisione Google Drive e Dropbox non sono link immagine diretti. La maggior parte dei renderer Markdown non li gestisce. Per Markdown pubblicato serve un image host che fornisca URL diretti.
Hotlinking: la tua immagine verrà bloccata?
Hotlinking = embed di immagine ospitata altrove nel tuo sito. Molti servizi lo bloccano per risparmiare banda.
| Servizio | Hotlinking permesso | Note |
|---|---|---|
| Image host (lpic.cc, ImgBB, Imgur) | Sì | È il loro scopo primario |
| Repo GitHub | Sì (con limiti) | Traffico alto può essere limitato |
| WordPress.com | No | Controlla Referer |
| Siti normali | No | Tipicamente bloccano embed esterni |
Best practice per technical writing italiano
Per chi scrive documentazione tech, post su Medium, articoli per Tom's Hardware Italia, guide su Hardware Upgrade:
Alt text seri, non generici
<!-- Bocciato -->
<!-- Promosso -->
Tre funzioni dell'alt text:
- Fallback testuale se l'immagine non carica.
- Accessibilità per screen reader — obbligo crescente con European Accessibility Act 2025.
- SEO: Google legge l'alt text per capire il contenuto visuale.
Naming file significativo
<!-- Bocciato -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg
<!-- Promosso -->
github-actions-workflow-config.png
npm-install-success-output.png
Tra sei mesi, ringrazierai il tuo io passato.
Scelta formato
- Screenshot, UI: PNG (testo nitido).
- Foto, immagini complesse: WebP o JPEG (file più piccoli).
- Icone, loghi, diagrammi: SVG (zoomabili senza degrado).
- Demo animate: WebP animate o GIF (sotto 5 MB).
Comprimi prima di caricare
Strumenti consigliati:
- Squoosh (squoosh.app): Google-made, operi dal browser.
- TinyPNG (tinypng.com): compressione batch PNG/JPEG.
- ImageOptim (macOS): drag & drop, qualità preservata.
Strategia universale cross-piattaforma
Se il tuo Markdown deve renderizzare bene ovunque (GitHub README + HackMD appunti + Notion doc interno), questa strategia funziona:
- Sintassi: solo
standard, mai estensioni proprietarie. - Dimensione: pre-processa il file all'esterno (tipicamente 600-800px di larghezza per contenuto main).
- Sorgente: image host con link diretto. lpic.cc offre upload senza registrazione e link diretto, adatto per Markdown cross-platform. Non usare Google Drive/Dropbox link.
- Formato: PNG o WebP, mai BMP o TIFF.
Nota: lpic.cc al momento non offre ridimensionamento o crop server-side. Pre-processa sempre in locale. Per esigenze di batch upload via API o trasformazione dinamica, servono servizi come Cloudinary o Imgur API (dove disponibili).
FAQ
Markdown permette di centrare un'immagine?
La sintassi standard non supporta allineamento. Su GitHub si usa HTML: <p align="center"><img src="url" width="400"></p>. HackMD supporta {:center}. Notion e Obsidian agiscono via UI. Typora accetta HTML.
Posso usare percorsi relativi a file locali?
Sì: . Ma funziona solo in editor locali (Typora, Obsidian, VS Code). Per pubblicazione web, servono URL assoluti pubblici.
Perché la mia immagine non appare nel README GitHub?
Tre cause tipiche: (1) URL non è link diretto ma richiede login; (2) il server sorgente blocca hotlinking da GitHub; (3) percorso relativo errato, non corrisponde alla struttura del repo.
La sintassi =300x di HackMD funziona altrove?
No. È un'estensione specifica HackMD. Non funziona su GitHub, Notion, Obsidian. Per doc cross-platform, pre-ridimensiona il file o usa HTML <img> (supportato almeno da GitHub, HackMD, Typora).
Differenza tra link diretto e link di condivisione?
Link diretto: URL che punta direttamente al file immagine, tipicamente finisce in .jpg, .png, .webp. Il browser apre l'immagine pura. Link di condivisione (Google Drive, Dropbox): URL che punta a una pagina web con preview, non al file. La sintassi Markdown richiede link diretto.
Obsidian per documentazione tecnica italiana: cosa conviene?
Obsidian è la scelta più tecnica tra le quattro. Vantaggi per chi scrive in italiano: supporta wikilink per note interconnesse (ottimo per glossari tecnici, manuali di prodotto), file locali .md sincronizzabili via Git con privacy totale, community italiana attiva su Reddit r/ObsidianMD e canali Telegram. Svantaggi: curva di apprendimento più ripida di Notion.
Per blog italiani su WordPress, come gestire le immagini Markdown?
WordPress accetta Markdown se usi plugin come "Jetpack Markdown" o "WP Githuber MD". La sintassi  funziona, ma perdi il controllo fine delle dimensioni. Alternativa: scrivi in Markdown nel tuo editor preferito (Typora, Obsidian), converti in HTML, incolla nel Gutenberg editor di WordPress. Preserverai SEO e accessibilità meglio.