How do I convert an image to Base64?

Drop an image and the Base64 string appears straight away, along with a ready-made data URI, a CSS background snippet and an HTML img tag. Copy whichever form your code needs with one tap. It runs in your browser, so the image is never uploaded.

What is a Base64 image and a data URI?

Base64 is a way of writing binary data, like an image, using only text characters. A data URI wraps that text with a prefix such as data:image/png;base64, so a browser can read it inline. Putting the image directly in your HTML or CSS this way means one fewer file to request.

When should I use a Base64 image instead of a file?

Inlining works best for small assets: icons, tiny logos, a 1px background, an image used in an email template. It saves a network request, which can speed up the first paint. For large photos it backfires, because Base64 adds about a third to the size and cannot be cached separately.

How much bigger does Base64 make the image?

Roughly 33% larger than the original bytes, because every three bytes become four text characters. The tool shows both the original size and the encoded size so you can judge whether inlining is worth it for a given image.

Which formats can I encode?

JPG, PNG, WebP, GIF, AVIF and ICO. The data URI carries the correct MIME type for the format, so the browser renders it exactly as it would the original file. For SVG specifically, a URL-encoded data URI is usually smaller than Base64.

Is my image uploaded to encode it?

No. The file is read and encoded entirely in your browser with the FileReader API. Nothing is sent to a server, which you can confirm in the Network panel, so private or client assets stay on your device.

Image to Base64 — Encode to Data URI Online

Image to Base64

Drop an image and get its Base64 straight away, as a raw string, a full data URI, a CSS background rule and an HTML img tag. The original and encoded sizes are shown so you can tell when inlining is worth it. Copy any form with one tap. It runs in your browser, so the image is never uploaded.

Files never leave your device
Runs in your browser
Free, no signup

How it works

1
Drop an image
Add a JPG, PNG, WebP, GIF, AVIF or ICO. It is read in your browser, with no upload.
2
Pick the form you need
Raw Base64, a data URI, a CSS background rule or an HTML img tag are all generated for you.
3
Copy it
Tap copy on the form that matches your code, then paste it straight into your stylesheet or markup.

What this encoder gives you

Every form ready to paste

Raw Base64, the data URI, a CSS background rule and an img tag are all generated, so you copy the exact shape your code wants.

See the size cost

The original and encoded sizes are shown side by side, so you can judge whether inlining helps or hurts before you use it.

Encoded locally, never uploaded

The file is read with the browser FileReader and never sent anywhere, so private and client assets stay on your device.

Where this helps

Frontend

Inlining small icons

Drop a tiny icon or logo into your CSS as a data URI to save a network request.

Email templates

Embed an image directly in HTML email markup where external files are unreliable.

Prototyping

Self-contained demos

Keep an image inside a single HTML file so a demo works with no asset folder.

Backend

Data in JSON or APIs

Send an image as a text field in a JSON payload when a binary upload is awkward.

Tips that help

1
Inline small, link large
Base64 suits icons and tiny assets. For photos, keep a file, since inlining adds size and blocks caching.
2
Mind the cache
An inlined image is re-downloaded with the HTML or CSS each time. A real file can be cached separately.
3
Use the CSS snippet
The ready-made background-image rule drops straight into a stylesheet, no hand-assembly needed.
4
Encoding an SVG?
For SVG, a URL-encoded data URI is smaller than Base64. Use the dedicated SVG encoder for that form.

Encoding an image to Base64: when to inline and when not to

Turning an image into a Base64 data URI lets you drop it straight into HTML, CSS or JSON with no separate file. It is a genuinely useful trick for the right asset and a mistake for the wrong one. This guide explains what the encoding does, where inlining helps performance, and where it quietly hurts it.

What the encoding produces

Base64 rewrites the image's raw bytes using a 64-character alphabet, so the result is plain text that survives anywhere text is allowed. Wrapped in a data: prefix with the right MIME type, that text becomes a self-contained image the browser can render inline.

The tool hands you several ready forms of the same thing: the bare Base64, the full data URI, a CSS background-image rule, and an HTML img tag. You copy the one that matches where the image is going, rather than assembling it by hand.

Because the encoding is exact, the inlined image is identical to the original. Nothing is recompressed or resized; only the container changes from a file to a string.

When inlining helps

The win is one fewer network request. For a small icon or a background used on every page, inlining it into the CSS means the browser does not make a separate round trip to fetch it, which can shave time off the first render.

It is also handy when you cannot rely on a file path: an email template, a single self-contained HTML file, a quick demo, or data embedded in JSON sent to an API. In those cases the image has to travel as text, and Base64 is how.

Small, frequently reused, render-critical assets are the sweet spot. A sprite-sized icon inlined into your stylesheet is a classic good use.

When to keep it a file

Base64 adds about a third to the byte size and cannot be cached on its own, so an inlined image is re-downloaded with the HTML or CSS every time rather than served from cache. For anything large or reused across many pages, a normal file is faster overall.

Big photos are the clearest case to avoid. Inlining a hero image bloats your HTML, delays parsing, and throws away the browser's ability to cache and lazy-load it. Keep those as files and, if size matters, convert them to a lighter format with the WebP converter.

If you need to go the other way and turn a Base64 string back into a file, the Base64 to image tool decodes it and lets you download the result.

Frequently asked questions

Honest answers to what people ask before using this tool.

Image to Base64

How it works

Drop an image

Pick the form you need

Copy it