Markdown Image Formatter

Generate sized, aligned, and captioned images for Markdown using correctly-formatted HTML — width, height, centering, floating, and figure captions. Free, no signup.

Preview

Markdown Image Formatter

Standard Markdown image syntax — ![alt text](url) — has no way to set a width or height, center or float an image, or add a caption. There simply is no native Markdown attribute syntax for any of it. The only way to get sizing, alignment, or captions in a document a Markdown renderer will still accept is to drop down to raw HTML directly inside the Markdown file. This tool builds that HTML correctly — with the right inline style attribute, and a proper <figure>/<figcaption> wrapper when you want a caption — so you don't have to hand-write it and get the syntax subtly wrong.

Every output mode here is raw HTML, not Markdown — worth stating plainly rather than glossing over, since it's the whole reason this tool exists and also the source of its one real limitation (see "Where this works, and where it doesn't" below).

Use cases

  • READMEs — a centered logo or screenshot at a sane width instead of a full-resolution image stretching the page
  • Documentation with figures — a captioned diagram or screenshot that reads like a numbered figure
  • Blog posts on Jekyll/Hugo/static sites — floating a small image next to a paragraph of text
  • Wiki pages — a clickable thumbnail that links to the full-size original

Where this works, and where it doesn't — be honest about it

Because the output is raw HTML embedded in a Markdown file, it only works on renderers that pass inline HTML through untouched. That's most of them — but not all:

  • GitHub and GitLab render inline HTML fine in READMEs, issues, PRs, and wikis — this is exactly the technique GitHub's own docs recommend for sizing README images, and it's the primary use case this tool targets.
  • Notion and Slack strip raw HTML entirely when Markdown is pasted or imported — this matches the documented behavior of our own Markdown → Notion and Markdown → Slack tools, both of which strip or flatten inline HTML for the same reason. If you're targeting either platform, this tool's output won't survive the paste — use their native image-embedding instead.
  • MkDocs (Python-Markdown) and Jekyll (kramdown) both pass inline HTML through by default — kramdown in particular is well known for treating a raw HTML block as opaque and rendering it as-is, so this technique works out of the box on both. Docusaurus (MDX) also renders raw HTML tags directly, since MDX treats them as real JSX elements. None of these were assumed — each was confirmed against its own documented HTML-handling behavior before writing this section.
  • Obsidian has its own, simpler native syntax for this and doesn't need raw HTML at all: ![[image.png|300]] resizes an embedded image to 300px wide directly, with no HTML required. If you're only ever going to use this in Obsidian, that syntax is simpler and more idiomatic than the HTML this tool generates — reach for it instead.

Test the output on your actual target platform before relying on it — as with every raw-HTML technique on this site, getting the syntax right doesn't guarantee your specific renderer chooses to pass it through.

For more on resizing and positioning images in Markdown, see our companion guides: How to Change Image Size in Markdown and Markdown Image Alignment and Positioning: The Complete Guide.

Related tools