Inline CSS icons. Embed small icons (<4 KB) as background images in stylesheets to avoid extra HTTP requests and eliminate flash-of-unstyled-content on first paint. Self-contained HTML documents. Single-file demos, offline-capable progressive web apps, or archived pages that need to travel or be emailed as one bundle with all assets embedded. Email and documentation. Self-contained HTML emails and Markdown notes (in Notion, Obsidian, or chat tools) where the image must travel with the text without external URLs breaking. Test fixtures and snapshots. Commit image assets directly in test code or snapshot files so test data is self-contained and reproducible without external dependencies. Quick prototypes and MVPs. Embed placeholder images in HTML prototypes or data payloads (JSON, GraphQL) without setting up a separate asset server. SVG data in attributes. Inline SVG graphics directly in HTML attributes or CSS properties where a separate file reference is not practical.

Drop or select an image file from your device. The tool accepts JPEG, PNG, GIF, WebP, SVG, and most other image MIME types. The browser reads the file bytes using the FileReader API and encodes them to Base64. The tool automatically detects the image MIME type and constructs a valid data URI: data:image/png;base64,iVBORw0KGgo... Click to copy the full string to your clipboard, then paste it directly into your HTML src attribute, CSS background-image rule, or Markdown.

Size inflation. Base64 encoding increases file size by roughly 33%. For images larger than 4–8 KB, the saved HTTP request is offset by the larger payload. Data URIs also cannot be cached separately by the browser, so every page load re-downloads the bytes. No de-duplication. If the same image appears on multiple pages, embedding each as a data URI means the bytes ship with every page. For reused assets, keep them as external URLs so the browser caches them once. Email client limitations. Most modern email clients support data URIs in tags, but Outlook on Windows has historically blocked them. For mass email campaigns, CID (Content-ID) attachments remain more reliable. SVG optimisation. For SVG images, embedding the markup directly in HTML or using URL-encoded SVG is often smaller than Base64. Base64-encoded SVG loses that advantage. Browser support and URL length. Very large data URIs can hit URL length limits in older browsers or some HTTP clients. Some systems cap at 2 KB or 4 KB; test before relying on massive embedded images.

Image to Base64

Convert any image to a Base64 data URI ready for inline use in HTML, CSS, or Markdown. Files stay in your browser.

Pick or drop an image

Preview

No image yet.

Data URI

Enter input above to see the result.

Snippets

What is this for?

A data URI embeds image bytes directly into a URL using Base64 encoding, eliminating the need for a separate HTTP request or external file. This tool converts any image you provide into a data:image/...;base64,... string ready to paste into HTML, CSS, Markdown, or JSON. The conversion happens entirely in your browser using the FileReader API—no file is uploaded or stored server-side.

When to use it

Inline CSS icons. Embed small icons (<4 KB) as background images in stylesheets to avoid extra HTTP requests and eliminate flash-of-unstyled-content on first paint.
Self-contained HTML documents. Single-file demos, offline-capable progressive web apps, or archived pages that need to travel or be emailed as one bundle with all assets embedded.
Email and documentation. Self-contained HTML emails and Markdown notes (in Notion, Obsidian, or chat tools) where the image must travel with the text without external URLs breaking.
Test fixtures and snapshots. Commit image assets directly in test code or snapshot files so test data is self-contained and reproducible without external dependencies.
Quick prototypes and MVPs. Embed placeholder images in HTML prototypes or data payloads (JSON, GraphQL) without setting up a separate asset server.
SVG data in attributes. Inline SVG graphics directly in HTML attributes or CSS properties where a separate file reference is not practical.

How it works

Drop or select an image file from your device. The tool accepts JPEG, PNG, GIF, WebP, SVG, and most other image MIME types.
The browser reads the file bytes using the FileReader API and encodes them to Base64.
The tool automatically detects the image MIME type and constructs a valid data URI: data:image/png;base64,iVBORw0KGgo...
Click to copy the full string to your clipboard, then paste it directly into your HTML src attribute, CSS background-image rule, or Markdown.

Common gotchas

Size inflation. Base64 encoding increases file size by roughly 33%. For images larger than 4–8 KB, the saved HTTP request is offset by the larger payload. Data URIs also cannot be cached separately by the browser, so every page load re-downloads the bytes.
No de-duplication. If the same image appears on multiple pages, embedding each as a data URI means the bytes ship with every page. For reused assets, keep them as external URLs so the browser caches them once.
Email client limitations. Most modern email clients support data URIs in <img src> tags, but Outlook on Windows has historically blocked them. For mass email campaigns, CID (Content-ID) attachments remain more reliable.
SVG optimisation. For SVG images, embedding the markup directly in HTML or using URL-encoded SVG is often smaller than Base64. Base64-encoded SVG loses that advantage.
Browser support and URL length. Very large data URIs can hit URL length limits in older browsers or some HTTP clients. Some systems cap at 2 KB or 4 KB; test before relying on massive embedded images.