MarkdownForge

Markdown images

An image is a link with an exclamation mark in front: ![alt text](image.png). Size and alignment need HTML.

![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png "GitHub's mascot")

[![Clickable image](https://github.githubassets.com/images/icons/emoji/rocket.png)](https://markdownforge.com)

<img src="https://github.githubassets.com/images/icons/emoji/sparkles.png" width="32" alt="Sparkles at 32px">

Basic syntax

![alt text](path/or/url.png "Optional title"). The alt text is read by screen readers and shown if the image fails to load, so describe what the image shows.

Resize an image

Markdown has no width syntax. Use HTML: <img src="shot.png" width="400" alt="…">. GitHub keeps width and height attributes. Some editors (Obsidian, Pandoc) have their own size syntax that won’t work elsewhere.

Center an image

Wrap it in a centred block: <p align="center"><img src="logo.png" width="120"></p>. The align attribute is obsolete in HTML5 but still honoured by GitHub, which strips style.

Image as a link

Put the image inside the link text: [![alt](img.png)](https://example.com). Badges in READMEs use exactly this.

Captions

Markdown has no caption element. Use an italic line under the image, or HTML <figure> and <figcaption> where allowed.

Local images

In a repo, use a relative path: ![diagram](docs/img/arch.png). In the editor here, local files would need to be hosted somewhere public to show up once exported.

Quick answers

How do I resize an image in Markdown?
Use an HTML <img> tag with a width attribute. Plain Markdown has no size syntax.
How do I center an image in a GitHub README?
Wrap it in <p align="center">…</p>. GitHub removes CSS styles but keeps the align attribute.
What should alt text say?
What the image shows or does, in a short phrase. Leave it empty (![](…)) only for purely decorative images.