Markdown Image Generator
Generate image syntax with alt text, links, captions, and sizing — Markdown and HTML
Shown by screen readers and when the image fails to load.
Markdown output uses an italic line; HTML output uses figure + figcaption.
<img src="https://example.com/photo.png" alt="A scenic mountain landscape">
Markdown Image Syntax Explained
The Markdown image syntax is a link with an exclamation mark in front:. The exclamation mark tells the renderer to embed the file instead of linking to it. The alt text between the square brackets is required for accessibility — screen readers announce it, search engines index it, and browsers display it when the image cannot be loaded. The title in quotes is optional and appears as a tooltip when readers hover over the image.
Clickable Images: Wrapping an Image in a Link
To make an image act as a link, nest the entire image syntax inside a link's square brackets. This is the pattern used for CI badges, "Deploy" buttons, and thumbnail galleries in READMEs. The image renders exactly as before, but clicking it opens the target URL.
Captions: The Two Standard Workarounds
Markdown has no native caption syntax, so two conventions have emerged. The quick approach is an italic line immediately below the image — it reads like a caption and works in every renderer. The semantically correct approach uses the HTML<figure> element with a<figcaption>, which browsers and assistive technology understand as an image-caption pair. This tool generates both so you can pick whichever your platform supports.
When You Need HTML Instead of Markdown
Markdown deliberately keeps its image syntax minimal, which means three common needs require falling back to the HTML <img> tag: sizing (width and height attributes), alignment (align attribute or a wrapping paragraph), and figure-style captions. Because almost every Markdown renderer — GitHub, GitLab, Bitbucket, most static site generators — passes inline HTML through, mixing the two is safe and widely used. The main exceptions are chat platforms like Slack and Discord, which strip HTML entirely.
Frequently Asked Questions
What is the Markdown syntax for an image?
An image is written as . It looks like a link with an exclamation mark in front. The alt text describes the image for screen readers and shows when the image fails to load.
How do I add a caption to a Markdown image?
Core Markdown has no caption syntax. The two standard workarounds are an italic line directly below the image (*Caption text*) or the HTML figure element with a figcaption, which this generator produces for you.
How do I resize an image in Markdown?
Pure Markdown cannot set image dimensions. Use the HTML img tag with width and/or height attributes instead, e.g. <img src="photo.png" width="400">. Most renderers, including GitHub, accept inline HTML for this.
How do I make an image clickable in Markdown?
Wrap the image syntax in a link: [](target-url). The image renders normally, and clicking it navigates to the target URL. This is how badge links in READMEs work.
What is the title attribute in the image syntax for?
The optional title, written in quotes after the URL, becomes hover tooltip text in most browsers. It is separate from the alt text, which is the accessible fallback description.
Should I use Markdown or HTML for images?
Use plain Markdown whenever you only need to display an image with alt text. Switch to HTML when you need sizing, alignment, captions with figcaption, or lazy loading — features Markdown does not support.