Image to Base64 / Data URI

Overview

The Image to Base64 / Data URI tool converts an uploaded image into a base64 ASCII string, optionally wrapped in a data:image/... URI ready to paste into HTML, CSS or JSON. Choose whether to include the data: prefix and the tool returns a long string you can copy directly into your codebase.

It is the right move when inlining a small icon into an email template, embedding a thumbnail into a JSON API payload, dropping a logo into an HTML email signature, or generating a CSS background that won't trigger an extra HTTP request. The Data URI format is especially useful when serving content from environments where external image URLs aren't allowed.

How it works

Base64 encoding maps every group of 3 input bytes onto 4 ASCII characters drawn from the set A-Z, a-z, 0-9, +, /. The 24 bits of three bytes split cleanly into four 6-bit indices. Inputs whose length isn't a multiple of three are padded with = characters so decoders know to ignore the spare bits.

A Data URI wraps the base64 payload in the syntax data:<mime-type>;base64,<payload>. The tool detects the source's MIME type from its magic bytes (PNG, JPEG, GIF, WebP, SVG, etc.) and prepends the correct prefix when you opt in. The output is roughly 33% larger than the original binary because four ASCII characters now represent three bytes.

Examples

Before: icon-16.png (480 bytes)
After:  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAA...
        (~640 ASCII characters, drop straight into <img src="...">)

Before: logo.svg
After:  data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c...
        Useful for inlining vector icons in CSS background-image.

Before: photo.jpg (1.5 MB)
After:  ~2 MB base64 string — too large for HTML inlining; convert
        only small icons under ~10 KB.

FAQ

When is base64 inlining worth it?

For icons under ~10 KB the saved HTTP request beats the 33% size overhead. For anything larger, a normal <img src="..."> reference outperforms inlining.

Why not just paste the URI without data:?

Browsers only treat the string as an image when the data: prefix and mime type are present. Without them you have a raw base64 blob useful only as an API payload, not as an HTML src.

Will email clients render Data URIs?

Most modern clients (Apple Mail, Thunderbird) do. Some older Outlook versions don't — for cross-client safety, host the image and link it instead.

Is base64 the same as URL encoding?

No — URL encoding (%2B for +) is a different scheme. Base64 produces an opaque string of letters, digits and three punctuation marks.

Can I encode without padding = characters?

The unpadded "base64url" variant exists but isn't valid inside a data: URI. Stick with the standard padded form for HTML and CSS use.

Try Image to Base64 / Data URI