MD Image Embed
Embed local and remote Markdown images as inline MIME (data: URI) blocks, and extract them back out into a pics/ folder. Produces a single, self-contained, portable .md file with no external image dependencies.
Features
Three commands (all available from the Command Palette, Ctrl+Shift+P):
| Command |
What it does |
| MD Image Embed: Embed All Images in File |
Scans the active Markdown file for every image reference — inline , reference-style ![alt][ref] + [ref]: path, and HTML <img src="https://github.com/RuslanRakhmanin/md_image_embed/raw/HEAD/..."> — resolves each to bytes, base64-encodes it, and embeds it as a data: URI. Identical image content is embedded only once (deduplicated by content hash). |
| MD Image Embed: Embed Image at Cursor |
Embeds only the single image reference under the cursor. |
| MD Image Embed: Extract Embedded Images to Folder |
Reverses an embed: writes each embedded image out to a pics/ folder next to the Markdown file and rewrites the references back to relative paths. |
Embedded data lives in a sentinel-delimited block at the end of the file
(<!-- md-image-embed:begin --> ... <!-- md-image-embed:end -->), which is
inert Markdown and renders invisibly in any standard Markdown viewer. Images
inside fenced or inline code blocks are never touched. Remote URLs are fetched
with a timeout; unreachable or oversized images are left unchanged with a
warning rather than failing the whole operation. The extension works fully
offline and in untrusted workspaces.
Requirements
None beyond VS Code itself. The extension uses only file reads/writes and
optional HTTP fetches — no code execution, no telemetry.
Extension Settings
| Setting |
Default |
Description |
mdImageEmbed.maxMarkdownFileSizeKB |
2048 |
Maximum Markdown file size (in KB) allowed for the "Embed All" command. |
mdImageEmbed.maxImageSizeKB |
512 |
Maximum individual image size (in KB) allowed to be embedded. |
mdImageEmbed.remoteFetchTimeoutMs |
8000 |
Timeout in milliseconds for fetching remote images. |
mdImageEmbed.extractFolderName |
"pics" |
Folder name (relative to the Markdown file) used when extracting embedded images. |
Known Limitations
- No auto-run on save or file-watch behavior — commands are manual.
- No image transformation/optimization (resizing, recompression) — images are
embedded as-is.
- No support for MDX, non-Markdown formats, or embedding video/audio.
- Images already using a
data: URI are treated as already embedded and
skipped.
Building the Extension
Prerequisites: Node.js (with npm) and @vscode/vsce (the VS Code Extension
Manager, npm install -g @vscode/vsce).
npm install # install dependencies
npm run package # compile the production bundle into dist/
npx @vscode/vsce package # package dist/ into md-image-embed-<version>.vsix
--no-rewrite-relative-links is needed when the repository has no git remote
(and no repository field in package.json), because vsce otherwise tries
to resolve relative links/images in the README against the repository URL and
aborts with a "Couldn't detect the repository" error:
npx @vscode/vsce package --no-rewrite-relative-links
The resulting .vsix can be installed manually from VS Code: Extensions →
... menu → Install from VSIX…. The version in package.json is what ends
up in the artifact name, so bump it before packaging a new release.
Release Notes
See CHANGELOG.md.
