When should an image be embedded as base64?

Embedding makes sense for images under roughly 5 KB — small icons and background patterns — because at that size the cost of a separate network request outweighs what you save. Above that, a separate file is nearly always faster, since it can be cached and downloaded in parallel.

Is my image uploaded to a server?

No — the file is read directly by your browser using FileReader and is never transmitted anywhere. Closing the tab clears it from memory entirely.

Why is the base64 output larger than the original file?

Because base64 represents every three bytes of data with four text characters, which adds about a third to the size. That overhead is the price of being able to write binary data as plain text inside HTML or CSS.

Text & Converters

Image to Base64 Converter

Pick an image file to get its base64 data URL, with ready-made snippets for HTML and CSS.

Choose or drop an image PROCESSED ON YOUR DEVICE · NEVER UPLOADED

// NO FILE YET

What this is

An image to base64 converter turns an image file into a string of text representing that file's bytes, so the image can be embedded directly in HTML or CSS with no separate file. The result is called a data URL, and browsers treat it exactly like an ordinary image address. It pays off most for small images — icons, small logos, background patterns — where a separate request costs more time than the content itself.

How it works

Base64 inflates the data by about 33%, because every three bytes of image become four characters of text. That is why large images should not be embedded: a 500 KB file becomes roughly 670 KB of text that downloads with the page and cannot be cached separately the way an image file can.

For SVG, embedding it as URL-encoded text is often smaller than base64, since SVG is already text. This tool shows both forms for SVG so you can take whichever is shorter.

How to use it

Choose an image file Click the drop area or drag a file onto it. The file is processed on your device.
Check the resulting size The original and base64 sizes are shown side by side, so you can judge whether embedding makes sense.
Copy the snippet you need A raw data URL, an HTML snippet and a CSS snippet are provided — just copy one.

Common questions

When should an image be embedded as base64?: Embedding makes sense for images under roughly 5 KB — small icons and background patterns — because at that size the cost of a separate network request outweighs what you save. Above that, a separate file is nearly always faster, since it can be cached and downloaded in parallel.
Is my image uploaded to a server?: No — the file is read directly by your browser using FileReader and is never transmitted anywhere. Closing the tab clears it from memory entirely.
Why is the base64 output larger than the original file?: Because base64 represents every three bytes of data with four text characters, which adds about a third to the size. That overhead is the price of being able to write binary data as plain text inside HTML or CSS.

Notes

Your file is processed in the browser and never uploaded.