When is inlining images useful?

Email rendering, offline distribution, and single-file documents where external image references would break.

What image formats are supported?

PNG, JPEG, GIF, SVG, and WebP — each fetched, base64-encoded, and embedded as a data URI in place of the original URL.

What's the file-size trade-off?

Base64 inflates images by roughly 33 percent. Use it for small icons and screenshots, not large hero images.

Are my images uploaded?

No. The browser fetches and encodes each image directly — nothing routes through a server.

drop · base64 · self-contained Markdown

Inline an image as base64 Markdown

Convert any image file into a data URI and wrap it in standard Markdown syntax so the document is fully self-contained — great for offline distribution and email.

Markdown Image Inliner

Markdown

—

no file

Source file

—

MIME

—

type

Inflation

—

vs source

input · file

Alt text

Image file

Pick a file to preview

output · markdown

// pick an image to generate Markdown

Quick Start

How to inline an image

Pick a file, get a Markdown snippet with a data URI embedded — paste into any renderer.

01
Set alt text
Important for accessibility — also shown if rendering fails.
Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.
a11yGFMmarkedCommonMarklive
input · markdownalt · GFM
```
alt: logo
```
loaded · GFMGFM · ready
02
Pick a file
Any image MIME type. The file never leaves your browser.
Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.
filesoft-breaksoptionsconfiglive
file · options? · live
```
logo.png
```
options applied · livelive
03
Inspect inflation
Base64 grows source bytes by ~33%. Keep an eye on the size stat.
The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.
sizepreviewscoped CSSrenderstable
expand · rendered+33% · ready
```
base64 = src * 1.33
```
rendered · liverendered
04
Copy Markdown
Paste straight into your README, email or offline doc.
Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.
exportclipboard.md.htmlblob
✓ · exportedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

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.

Use Cases

When to inline images

Self-contained docs, emails, offline.

Email-friendly

MD-aware clients render data URIs without a CDN. 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-compliant

Offline docs

Ship docs that work without an internet connection. 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-perfect

Small logos

Icons under 5KB inline cleanly without bloating the doc. 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-friendly

Snapshots

Single-file Markdown reports with diagrams included. 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-stable

No-CDN repos

Avoid external image hosts that may break later. 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-platform

Slack pastes

Markdown-aware tools that allow data URIs render inline. 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-friendly

FAQ

Frequently asked questions

How big can the image be?

Anything your browser can hold in memory — but most renderers slow down beyond ~1 MB. Keep below 200 KB for snappy rendering.

Does GitHub render data URIs?

Yes, but GitHub also re-hosts uploaded images, so dragging into an issue is usually simpler. Use this tool for offline / email scenarios.

Why is the output ~33% bigger than the file?

Base64 uses 4 ASCII chars per 3 bytes of source, so it inflates by ~33%.

Does the file leave my machine?

No. Everything happens in your browser.

Can I batch inline?

Not yet — pick one file at a time and paste in sequence.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!