Image to Base64

Continue in the tool

image data URI and Base64

Data URI and Base64 Images: When to Use Them

A data URI embeds an image byte-for-byte inside HTML, CSS, or JS as text, using the `data:[mime-type];base64,<data>` format defined by RFC 2397. That removes one separate HTTP request for the file, but trades it for a text version that is always bigger than the original binary, and this tool computes exactly how much bigger before you decide.

The Base64 math, and where it stops paying off

Base64 encodes every group of 3 binary bytes into 4 ASCII characters, a fixed 33% overhead: 1024 bytes (1 KB) become 1368 characters, and a 200 KB JPEG becomes about 267 KB of text. This tool computes that exact overhead from the original size and the generated text size, instead of you estimating it by hand.
The tool flags any data URI above 20,000 characters as "large", which corresponds to an original image of roughly 15 KB (15,360 bytes become 20,480 characters by the same 4-for-3 math). Past that point, the embedded text falls out of the browser image cache and gets re-downloaded along with the HTML or CSS on every visit, unlike a normal `<img src>`, which the browser caches separately and reuses across pages.
The real trap is trusting the file extension to know the format: this tool reads the byte signature (magic bytes) of the decoded content instead, the leading 8 bytes 89 50 4E 47 0D 0A 1A 0A identify PNG, FF D8 FF identifies JPEG, and a RIFF header followed by "WEBP" at offset 8 identifies WebP, among other signatures. A `.png` file that actually starts with FF D8 FF gets recognized as a JPEG, not a PNG.

Three sizes, three different decisions

A small icon (Base64 pays off)

Input: PNG de 1024 bytes (1 KB)
Expected output: 1368 caracteres em Base64 (+33%)

For an icon this small, the 344 extra characters cost less than one more HTTP request.

A large photo (Base64 does not pay off)

Input: JPEG de 200 KB
Expected output: ~267 KB de texto, sem cache próprio de imagem

The embedded image gets downloaded again on every page load, bundled with the HTML or CSS that contains it.

A wrong file extension

Input: Arquivo `.png` que começa com os bytes FF D8 FF
Expected output: Formato identificado como image/jpeg pela assinatura

The tool ignores the file name and reads the actual bytes to decide the MIME type.

Full tool FAQ

What is a Base64 Data URI?

It is a way to represent binary data (like an image) using only ASCII text characters, in the form data:image/png;base64,XXXX. This lets you embed the image directly in HTML or CSS code, with no separate file.

When should I embed images as Base64?

Why is the Base64 larger than the original file?

Does the tool send my image to a server?

What is the difference between the Base64 string and the Data URI?

Can I use Base64 with SVG?

Are Base64 images cached by the browser?

How do I decode a Base64 back to an image?

Frequently asked questions

Why does a Base64 image end up bigger than the original file?

Because Base64 encoding represents every 3 binary bytes with 4 text characters, a fixed 33% overhead (4/3), no matter what format the original image is in.

At what image size does Base64 stop being worth it?

This tool uses 20,000 characters (about 15 KB of original image) as the practical cutoff: below that, the saved HTTP request tends to be worth more than the 33% overhead; above it, the bigger file and the lost image cache outweigh the saving.

Can I use Base64 as a CSS background-image, or only in an <img> tag?

It works both ways: the tool generates the snippet both as the src attribute of an <img> tag and as a CSS background-image value, from the same data URI.

How do I find a Base64 image's real format if the file extension is wrong?

The tool decodes the Base64 and reads the byte signature at the start of the file (for example FF D8 FF for JPEG, or the leading 8 bytes of PNG), instead of trusting the extension or a mistyped file name.

Next steps

Continue in the tool

Open full tool

image data URI and Base64

Data URI and Base64 Images: When to Use Them

The Base64 math, and where it stops paying off

Base64 encodes every group of 3 binary bytes into 4 ASCII characters, a fixed 33% overhead: 1024 bytes (1 KB) become 1368 characters, and a 200 KB JPEG becomes about 267 KB of text. This tool computes that exact overhead from the original size and the generated text size, instead of you estimating it by hand.

The tool flags any data URI above 20,000 characters as "large", which corresponds to an original image of roughly 15 KB (15,360 bytes become 20,480 characters by the same 4-for-3 math). Past that point, the embedded text falls out of the browser image cache and gets re-downloaded along with the HTML or CSS on every visit, unlike a normal `<img src>`, which the browser caches separately and reuses across pages.

The real trap is trusting the file extension to know the format: this tool reads the byte signature (magic bytes) of the decoded content instead, the leading 8 bytes 89 50 4E 47 0D 0A 1A 0A identify PNG, FF D8 FF identifies JPEG, and a RIFF header followed by "WEBP" at offset 8 identifies WebP, among other signatures. A `.png` file that actually starts with FF D8 FF gets recognized as a JPEG, not a PNG.

Three sizes, three different decisions

A small icon (Base64 pays off)

Input: PNG de 1024 bytes (1 KB)
Expected output: 1368 caracteres em Base64 (+33%)

For an icon this small, the 344 extra characters cost less than one more HTTP request.

A large photo (Base64 does not pay off)

Input: JPEG de 200 KB
Expected output: ~267 KB de texto, sem cache próprio de imagem

The embedded image gets downloaded again on every page load, bundled with the HTML or CSS that contains it.

A wrong file extension

Input: Arquivo `.png` que começa com os bytes FF D8 FF
Expected output: Formato identificado como image/jpeg pela assinatura

The tool ignores the file name and reads the actual bytes to decide the MIME type.

Full tool FAQ

What is a Base64 Data URI?

When should I embed images as Base64?

Why is the Base64 larger than the original file?

Does the tool send my image to a server?

What is the difference between the Base64 string and the Data URI?

Can I use Base64 with SVG?

Are Base64 images cached by the browser?

How do I decode a Base64 back to an image?

Frequently asked questions

Why does a Base64 image end up bigger than the original file?

Because Base64 encoding represents every 3 binary bytes with 4 text characters, a fixed 33% overhead (4/3), no matter what format the original image is in.

At what image size does Base64 stop being worth it?

Can I use Base64 as a CSS background-image, or only in an <img> tag?

It works both ways: the tool generates the snippet both as the src attribute of an <img> tag and as a CSS background-image value, from the same data URI.