What output formats can I get?

Nine: a data URI, raw Base64 (no data: prefix), a CSS background rule, a CSS custom property, an HTML tag, a JSX/React element, a Markdown image, and a JSON object. The markup formats accept alt text and a class/className, and the CSS background format lets you set the target selector.

Why is the Base64 version bigger than my original file?

Base64 encodes three bytes as four ASCII characters, so it adds roughly 33% to the size, plus the data-URI prefix. The tool shows this as an overhead percentage. That is why inlining is best for small, rarely-changing assets and not for large photos.

Can I paste an image instead of uploading a file?

Yes. Copy an image to your clipboard (for example from a screenshot tool) and press Ctrl/Cmd+V anywhere on the page — it will be encoded immediately. You can also drag-and-drop a file or use the file picker.

Is my image uploaded to a server?

No. Encoding happens entirely in your browser using the FileReader and canvas APIs. The image bytes never leave your machine, which makes the tool safe for private or sensitive assets.

What file types and size limits are supported?

PNG, JPG, WebP, GIF, SVG, and AVIF, up to 10MB per file. SVGs encode as text-based data URIs, which is one of the few cases where inlining a slightly larger asset can still be worthwhile.

When should I inline an image as Base64 versus linking it?

Inline tiny, stable assets — icons, 1×1 tracking pixels, small SVGs — to avoid an extra HTTP request, especially in CSS, emails, or JSON. For anything larger, link the file: a big data URI bloats your HTML/CSS and cannot be cached separately, which the tool warns you about above ~100KB.

Image to Base64

Encode any image to a Base64 data URI live — drop, paste or pick a file, then copy it as a data URI, CSS background, HTML/JSX <img>, Markdown or JSON, with size & dimension stats.

About this ToolHow it works, benefits & use cases

Turn any image into a Base64 string without uploading it anywhere. Drop a file, pick one, or paste an image straight from your clipboard with Ctrl/Cmd+V, and Image to Base64 encodes it locally and shows a checkerboard preview plus useful stats: dimensions, aspect ratio, MIME type, original size, the larger Base64 size, and the encoding overhead percentage. The real value is the format switcher — the same image can be copied as a raw data URI, raw Base64, a CSS background rule, a CSS custom property, an HTML <img> tag, a JSX/React snippet, a Markdown image, or a JSON object. For the markup formats you can fill in alt text and a class/className, and the CSS format lets you set the selector. Supports PNG, JPG, WebP, GIF, SVG, and AVIF up to 10MB, and warns you when a data URI is large enough that linking the file would be smarter. Everything happens in your browser — the image is never sent to a server.

How to Use

1Drop an image onto the upload area, click to pick a file, or paste one from your clipboard (Ctrl/Cmd+V). You can also click "Try a sample".
2Review the preview and stats — dimensions, aspect ratio, type, original vs Base64 size, and overhead.
3Choose an output format: Data URI, Raw Base64, CSS background, CSS variable, HTML <img>, JSX/React, Markdown, or JSON.
4For HTML/JSX/Markdown, fill in the alt text (and class/className); for CSS background, set the selector.
5Copy the generated output or download it as a file, then click "New image" to encode another.

Key Benefits

Encode by drag-and-drop, file picker, or clipboard paste
Nine output formats: data URI, raw Base64, CSS, CSS variable, HTML, JSX, Markdown, JSON
Editable alt text, class/className, and CSS selector for the markup formats
Shows dimensions, aspect ratio, MIME type, sizes, and Base64 overhead
Supports PNG, JPG, WebP, GIF, SVG, and AVIF up to 10MB
Warns when a data URI is too large to be worth inlining
Runs entirely in your browser — the image is never uploaded

Common Use Cases

Inlining a small icon or logo as a CSS background to save an HTTP request
Embedding a tiny image directly in an email or JSON payload
Generating a data-URI <img> tag for a self-contained HTML snippet
Producing a JSX image element with alt and className for a React component
Inspecting an image's size and Base64 overhead before deciding to inline it

Upload an image

Click to upload or drag and drop

Accepted: image/* • Max 10 MB

PNG, JPG, WebP, GIF, SVG, AVIF — or just paste from your clipboard (⌘/Ctrl+V). Max 10MB.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on