Why is the Base64 version larger than the file?

Base64 represents every three bytes as four printable characters, so the payload is always about 33% bigger. The data URI prefix adds a little more on top.

When is a data URI worth it?

For small assets that would otherwise cost a separate request — icons, a tiny background pattern, an image inside an email template. Roughly under a few kilobytes.

When is it a bad idea?

For anything large. An inlined image cannot be cached on its own, so every page load carries it again, and it blocks the stylesheet or document it sits inside from parsing until it is read.

No. SVG is text, so it can be URL-encoded into a data URI directly, which is both smaller and readable. Base64 is only necessary for binary formats.

Image to Base64

Encode an image as a Base64 data URI so it can live inside a stylesheet or a document instead of as a separate file. The output is available raw or wrapped for CSS, HTML, or Markdown, and the size figures show exactly what the encoding costs — about a third more than the original file.

Image Tools

Choose an image to encodeEncoded in your browser — the file is never uploaded

Base64 encodes three bytes as four characters, so a data URI is always about 33% larger than the file it carries. It buys one fewer network request, which is worth it for small icons and rarely worth it for photographs.

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

What a data URI contains

data:[<media type>][;base64],<data>

The MIME type tells the browser how to decode the bytes, and the Base64 payload carries the file itself. Because everything is in the string, the browser needs no additional request to display it.

Base64 encodes 3 bytes into 4 characters, a fixed 4/3 overhead, plus padding.
Data URIs are not cached separately — they are cached only as part of the file that contains them.
A document or stylesheet containing large data URIs is slower to parse, because the whole string must be read before anything after it.
Encoding is not encryption. Anyone can decode a data URI trivially.

For reference

What the encoding costs

Original file	As Base64	Overhead
1 KB	1.36 KB	+35.7%
10 KB	13.36 KB	+33.6%
100 KB	133.36 KB	+33.4%
1 MB	1.33 MB	+33.3%

The overhead settles at 33.3% as the file grows — four characters for every three bytes. Small files pay a little more because the data: prefix is a fixed 22 characters however small the image.

How to use

4 clear steps.

Drop in the image you want to encode.
Choose whether you want the raw data URI or a CSS, HTML, or Markdown snippet.
Check the size figures to see what the encoding costs.
Copy the result.

Good to know

Frequently asked questions

Why is the Base64 version larger than the file?: Base64 represents every three bytes as four printable characters, so the payload is always about 33% bigger. The data URI prefix adds a little more on top.
When is a data URI worth it?: For small assets that would otherwise cost a separate request — icons, a tiny background pattern, an image inside an email template. Roughly under a few kilobytes.
When is it a bad idea?: For anything large. An inlined image cannot be cached on its own, so every page load carries it again, and it blocks the stylesheet or document it sits inside from parsing until it is read.
Do SVGs need Base64?: No. SVG is text, so it can be URL-encoded into a data URI directly, which is both smaller and readable. Base64 is only necessary for binary formats.