Skip to content
Initurn

Convert an image to Base64

Files never leave your device. All processing happens in your browser.

How to convert Image to Base64

  1. 1

    Drop in the image you want to embed.

  2. 2

    The full data URI appears below, ready to copy.

  3. 3

    Paste it into your CSS, HTML or JSON.

Base64 turns binary data into plain text, which lets an image live directly inside a stylesheet, an HTML document, a JSON payload or an email template — no separate file, no second network request. What you get below is a complete data URI, prefix included, so it can be pasted straight in and will work as-is.

How to use the output

The string starts with something like data:image/png;base64, and that prefix is not decoration — it tells the browser what it is looking at. Drop the whole thing into a CSS background-image: url(…), an <img src="…">, an SVG <image> href, or a JSON string field. All four work identically.

The 33% tax

Base64 represents every three bytes of binary as four text characters, so the encoded version is about a third larger than the file. This is unavoidable — it is how the encoding works — and it is the main reason not to use data URIs for everything. A 100 KB image becomes roughly 133 KB of text, and that text is embedded in a file the browser must download and parse before it can do anything else.

When embedding is worth it

  • Tiny assets under a few kilobytes — icons, sprites, a spinner, a 1×1 tracking pixel. The saved HTTP request outweighs the size penalty.
  • Email templates, where many clients block linked images by default but display embedded ones.
  • Single-file HTML deliverables that must work with no accompanying folder of assets.
  • Placeholder or blur-up images shown while a real photograph loads.
  • Offline or air-gapped documents where there is nowhere to host a separate file.

When it is a mistake

Photographs and anything above roughly 10 KB are usually better left as files. Embedded images cannot be cached independently — change one icon and the whole stylesheet is invalidated for every visitor. They cannot be lazy-loaded, they block parsing of the file they sit in, and they make that file unreadable in a diff. With HTTP/2 and HTTP/3, the extra request that data URIs were invented to avoid is far cheaper than it was in 2010.

A note on SVG

SVGs are already text, so Base64 encoding them wastes that 33% for no reason. URL-encoding an SVG into a data URI instead usually produces something smaller than the Base64 version, and it stays readable. Base64 is still the safer choice if the SVG contains characters that are awkward to escape.

The file is read and encoded in this browser tab, on your device. Nothing is uploaded, which matters here because the output is the entire file in text form — anywhere it was transmitted would hold a complete copy.

Questions about Image to Base64

What is the data: prefix at the start, and do I need it?

Yes, keep it. It tells the browser the MIME type and that what follows is Base64. Without it, the string is just text and nothing will render it as an image. The output here includes it already.

Why is the Base64 string bigger than my image file?

Base64 encodes every three bytes as four text characters, so the encoded form is roughly 33 percent larger. That overhead is inherent to the encoding and is the main argument against embedding large images.

What size of image is worth embedding?

As a rule of thumb, under a few kilobytes. Small icons and placeholders benefit from skipping a network request; photographs almost never do, and they also break caching for whichever file they are embedded in.

Does this hurt page performance?

It can. Embedded images cannot be cached separately, so changing one invalidates the entire stylesheet or HTML file for every visitor, and they cannot be lazy-loaded. With modern HTTP the extra request they avoid is cheap.

Should I Base64 encode an SVG?

Usually not. SVG is already text, so URL-encoding it into a data URI is typically smaller than Base64 and stays human-readable. Base64 is the safer choice only when the SVG contains characters that are awkward to escape.

Is there a file size limit?

This tool stops at 8 MB, because Base64 adds another third on top and a string that large becomes slow to display and awkward to copy. For anything approaching that size, a data URI is the wrong approach anyway.

Is my image uploaded to encode it?

No. The file is read and encoded by JavaScript in this tab, on your own device. That matters more here than usual, since the output is a complete copy of your file in text form.

Related converters