Why is the Base64 string bigger than my image?

Base64 uses four text characters for every three bytes of data, so the encoded form is roughly a third larger by design.

When should I use a data URI?

For small images — icons, tiny logos, inline SVGs — where avoiding a separate request is worth the size penalty. Not for photographs.

Does it work in email?

In CSS backgrounds, support is patchy across email clients. In an tag it works more widely, though some clients still block it.

← Wszystkie narzędzia

Image to Base64

Encode an image as a data URI you can paste straight into CSS, HTML or JSON.

Upuść obraz tutaj

lub kliknij, aby przeglądać

Wybierz obraz

Encode an image as a data URI

A data URI carries the image itself inside the markup, so the browser never makes a second request for it. That is genuinely useful for a handful of small assets — an icon in a stylesheet, a placeholder in an email template, a logo inside a self-contained HTML file that has to work with no network at all.

When not to use it

Base64 encodes three bytes into four characters, so the string is roughly 33% larger than the original file, and it cannot be cached separately from the document that contains it. Inlining a photograph therefore makes a page slower rather than faster. As a rough rule, inline under about 4 KB and link to anything larger.

Frequently asked questions

Is my image uploaded to encode it?

No. The file is read with the browser's own FileReader and encoded on your device, so even private assets are safe to convert here.

Does encoding change the image?

Not at all. Base64 is a way of writing the exact same bytes using text characters, so decoding it gives back a byte-for-byte identical file.