Markdown Image Generator

Markdown image syntax

The standard form is a bang, square brackets around alt text, then the URL in parentheses. An optional title goes in quotes inside the parentheses - it becomes the tooltip on hover.

![Alt text describing the image](https://example.com/picture.png "Hover title")

Markdown has no width parameter

This is the single biggest gotcha. Markdown's image syntax has no size syntax. If you need a smaller image, drop down to HTML - every Markdown renderer that GitHub or GitLab uses also accepts inline <img> tags. The fallback box above copies the equivalent HTML.

<img src="https://example.com/picture.png" alt="Alt text" width="50%" />

You can pass width as a percentage (relative to the container) or as a pixel value. The builder above does both.

Captions, the practical way

Markdown has no caption syntax either. The convention is an italic line directly below the image - most renderers tighten the spacing so it reads as a caption.

![Site plan v2](https://example.com/site.png)
*Figure 1. Lot 14 with the proposed forty-eight raised beds.*

When you need real semantic structure, the HTML fallback uses <figure> and <figcaption>.

Alt text is not optional

Empty brackets render the image fine in a browser, but they fail screen readers and SEO. Describe what the image conveys, not what you see - a chart's alt text should say “Bar chart: garden volunteers grew from 8 to 47 between March and August”, not “bar chart”.

Compatibility

• GitHub and GitLab render both forms; HTML width is respected.
• Obsidian, VS Code preview, Typora - same.
• Notion (via Markdown import) accepts the standard syntax and ignores width on HTML; you can resize after import.
• md2document - the converter respects width and renders captions as figure text.

Runs in your browser - nothing is sent to a server.