How to Convert an Image to Base64 (Data URI for CSS, HTML or JSON)

To convert an image to Base64, open Image to Base64, drop in the file, and copy the result as a data URI, CSS background-image, an <img> tag, or raw Base64 text. The encoding happens entirely in your browser — the image is never uploaded anywhere.

What Base64-encoding an image actually does

A data URI embeds a file's bytes directly inside a URL as text, using the Base64 alphabet. Instead of linking to logo.png as a separate file, you can write src="data:image/png;base64,iVBORw0KGgo..." and the browser decodes it in place — no extra network request. This is useful for small icons, inline email images, or any case where you want one self-contained file instead of several.

The tradeoff is size: Base64 encoding turns every 3 bytes of the original file into 4 characters of text, so the encoded string is noticeably bigger than the file it came from — commonly 30%+ larger once you include the data:image/...;base64, prefix. Image to Base64 shows you exactly how much bigger, right above the result.

How to convert an image to Base64 with Toolbench

1. Open Image to Base64.
2. Drop in an image, paste one from your clipboard, or click to choose a file. PNG, JPG, WebP, GIF and SVG all work.
3. Leave Encode as on Same as original to encode the exact file you uploaded, or choose PNG, JPG or WebP to re-encode it into a different format first.
4. If you picked PNG, JPG or WebP, adjust Quality (0.1–1, default 0.9) — this only changes anything for JPG and WebP, since PNG is always lossless.
5. Read the size line above the result: it shows the encoded text's size and what percentage that is of your original file's size.
6. Click Copy data URI for the raw data:image/...;base64,... string, Copy CSS for a ready background-image rule, Copy <img> for a complete <img> tag, or Copy raw Base64 for just the encoded text with no prefix.

A worked example

Upload a small PNG icon and leave Encode as on Same as original. The tool reads the file's own bytes (unchanged — no re-encoding, no quality loss) and Base64-encodes them into a string like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Clicking Copy CSS gives you this, ready to paste into a stylesheet:

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");

Clicking Copy <img> instead gives you:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="">

Now switch Encode as to WebP with Quality at 0.9: the tool re-draws the same image, re-encodes it as WebP at that quality, and Base64-encodes that result instead — same pixel dimensions, but typically a smaller encoded string than the original PNG, since WebP compresses more efficiently.

Same as original vs. re-encoding

• Same as original (the default) encodes the file exactly as you uploaded it — no quality change, no resizing. This is the right choice when you need a pixel-perfect copy of the source file as a data URI.
• PNG / JPG / WebP re-draws the image at its original dimensions and re-encodes it in the chosen format before Base64-encoding the result. Quality only affects JPG and WebP output; PNG stays lossless regardless of the slider. Switching to JPG also fills any transparency with white, since JPG has no transparency channel.

When to use a data URI (and when not to)

• Good fit: small icons, logos, or images inline in a single HTML email, a CSS file, or a JSON payload where you want one self-contained artifact instead of a separate image request.
• Poor fit: large photos or anything reused across many pages. A data URI can't be cached separately by the browser the way a linked image file can, and the ~33% size overhead adds up fast on bigger files.

Common mistakes

• Encoding a large photo and wondering why the page got slower. Data URIs skip a network request but bloat the HTML or CSS file itself, and they bypass normal browser image caching — fine for a small icon, bad for a hero photo.
• Expecting the Quality slider to do something on "Same as original." Quality only applies when you re-encode to PNG, JPG or WebP; left on "Same as original," the tool just encodes the file's existing bytes.
• Pasting the raw Base64 text where a full data URI is expected. Use Copy raw Base64 only when the destination (some JSON fields, some APIs) wants the bytes without the data:image/...;base64, prefix — use Copy data URI everywhere else.

Related tools

• Convert Image Format — convert between PNG, JPG and WebP without Base64-encoding the result.
• Compress Image — shrink a large photo's file size before you decide whether to inline it.
• Base64 Encode — encode plain text (not images) as Base64.
• Favicon Generator — generate a full set of favicon PNGs from a logo.

Frequently asked questions

Is my image uploaded to a server when I convert it to Base64?

No. The file is read and encoded entirely in your browser; it's never sent anywhere.

Why is the Base64 string so much bigger than my original file?

Base64 encodes every 3 bytes as 4 text characters, which alone adds about 33% overhead, and the data:image/...;base64, prefix adds a little more. The tool shows the exact percentage above the result.

What's the difference between Copy data URI and Copy raw Base64?

Copy data URI gives you the full data:image/png;base64,... string, ready to use as a URL. Copy raw Base64 gives you just the encoded text with that prefix stripped off, for cases that expect bytes without it.

Does choosing a different format change the image's size?

Only its pixel dimensions stay the same — Image to Base64 doesn't resize. But re-encoding to JPG or WebP at a given Quality can produce a smaller or larger encoded string than the original file, depending on the source format and content.

Can I Base64-encode an SVG with this tool?

Yes, as long as Encode as is left on Same as original — the tool reads the uploaded file's own bytes, so an SVG is encoded as-is.