Build Markdown image syntax
Inline , reference style, or raw HTML <img> with width/height. Optional wrap in a hyperlink.
How to embed an image
Three styles. Inline is the standard. Reference keeps body text clean. HTML lets you set width/height.
- 01
Alt + URL
Alt text is read by screen readers — always fill it in.
Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.
a11yGFMmarkedCommonMarkliveinput · markdownalt+url · GFM
loaded · GFMGFM · ready - 02
Pick style
Inline / reference / HTML. HTML is the only way to set dimensions in Markdown.
Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style
<br>insertion.stylesoft-breaksoptionsconfiglivestyle · optionshtml · live<img …/>
options applied · livelive - 03
Optional title
Tooltip shown on hover in most renderers.
The preview is scoped under a
.mdeclass so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.tooltippreviewscoped CSSrenderstabletitle · rendered? · ready
rendered · liverendered - 04
Make it clickable
Add a Link to URL to wrap the image in a hyperlink.
Export covers both raw Markdown and rendered HTML; downloads stream as
text/markdownortext/htmlviaBlob+ object URL.linkclipboard.md.htmlblob✓ · exportedclick · done[](link)
shipped · ready to shipsuccess
Author Markdown that renders everywhere
GFM is the safe default
GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.
Soft-break behaviour varies
A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.
Escape inside code fences
Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.
Anchors are slugified
GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.
Tables need a header row
The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.
Front matter is YAML
Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.
When to embed images
READMEs, docs, blog posts.
README logos
Top-of-README hero image with link to homepage. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.
GFM-compliantScreenshots
Use HTML mode to constrain large screenshots. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.
GitHub-perfectDiagrams
Inline architecture diagrams from a host. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.
diff-friendlyGIF demos
Animated demo GIFs in README. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.
render-stableReference style
Reuse the same image URL multiple times. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.
cross-platformMD-aware email clients render image syntax. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.
SEO-friendlyFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.