Image to Base64 Converter

What is a Base64 Image (Data URI)?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Key Features

Examples

transparent-1x1.png  (a 68-byte PNG)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 KB)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

How to Convert an Image to Base64

1. 1

   Add your image

   Drag an image onto the drop zone, click to browse, or paste from the clipboard with Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO, and BMP are all supported and encoded entirely in your browser.

2. 2

   Pick an output format

   Choose Data URI, raw Base64, HTML , CSS background, Markdown, or JSON from the tabs. Check the metadata bar for the size increase and the advice badge for whether inlining is worth it.

3. 3

   Copy or download

   Click Copy to grab the snippet, or Download to save it as a file. To reverse the process, switch to the Base64 → Image tab, paste a string, and download the reconstructed image.

Common Pitfalls

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Common Use Cases

Inline a logo or icon in CSS

Drop a small PNG or SVG icon, copy the CSS background-image snippet, and paste it into your stylesheet to remove an HTTP request for an asset that rarely changes. Keep it under ~2 KB (watch the green badge) so the stylesheet stays lean.

Embed images in HTML email

Email clients often block remote images. Encode your logo as a data URI and paste the element into the template so it renders without a server fetch. Test across clients — keep embeds to small icons, not photos.

Self-contained Markdown and READMEs

When you cannot host an image — a GitHub issue, a notebook, an offline doc — the Markdown output embeds the picture directly in the file so it travels with the text. Ideal for small diagrams and badges.

Images inside JSON or API payloads

Need to ship a thumbnail inside a JSON document or a config file? The JSON output gives you a { mime, data } object you can drop straight in, and the decoder recovers the image on the other end.

Quick data-URI debugging

Found a mysterious data: URI in a stylesheet or an API response? Paste it into the Base64 → Image tab to see what it actually is, read its real dimensions, and download it as a normal file for closer inspection.

Single-file widgets and bookmarklets

Bookmarklets and embeddable widgets must be self-contained with zero external dependencies. Inlining their icons as Base64 keeps everything in one file that works no matter where it is dropped.

Technical Details

How Base64 Encoding Works

Base64 takes the image's binary stream three bytes (24 bits) at a time and splits it into four 6-bit groups, each mapped to one character in the 64-symbol alphabet. When the input length is not a multiple of three, one or two = padding characters mark the remainder. This 3-to-4 ratio is why the encoded text is about 33% larger than the source. The tool computes the decoded byte length directly from the string length and padding, so the size figures it reports are exact, not estimated.

MIME Detection and Magic Bytes

When you encode a file, its MIME type comes from the browser's File object. When you decode a raw Base64 string with no data: prefix, the tool inspects the leading characters, which correspond to the image's magic bytes: iVBORw0KGgo for PNG, /9j/ for JPEG, R0lGOD for GIF, UklGR for WebP, and PHN2Zy or PD94bWw for SVG. This lets the decoder reconstruct a correct data URI and download with the right file extension even when the input is just the bare payload.

Local-Only Processing

Encoding uses the FileReader API's readAsDataURL, which returns a data URI synthesized entirely in the browser. Decoding for download uses atob plus a Uint8Array to rebuild the binary, then a Blob and an object URL — again with no network involved. The result is a tool you can run offline and trust with confidential images, because the bytes never leave the page. You can verify the zero-request behavior in your browser's developer tools.

Best Practices

Inline Only Small, Stable Assets

The sweet spot for Base64 is assets under ~2 KB that change rarely and appear on few pages — icons, tiny logos, UI sprites. Above ~10 KB, the size penalty and lost caching outweigh the saved request, especially now that HTTP/2 makes extra requests cheap. Let the advice badge guide you, and serve photos and large graphics as ordinary cached files.

Prefer URL-Encoding for SVG

SVG is text, so Base64 inflates it for no gain. When inlining SVG in CSS or HTML, URL-encode the markup instead — it is usually smaller, stays human-readable, and compresses better with gzip/brotli. Reserve Base64 SVG for pipelines that specifically require it. Our URL Encoder/Decoder handles the percent-encoding.

Always Set the Correct MIME Type

A data URI renders only if its MIME type matches the content: image/png, image/jpeg, image/gif, image/webp, image/svg+xml. A wrong or missing type is the number-one reason an embedded image fails to display. When you copy from this tool the type is set for you; if you assemble URIs by hand, double-check the prefix.

Compress Before You Encode

Since Base64 adds ~33% on top of the file size, shrinking the source first pays off twice. Run images through our Image Compressor — or export at the right dimensions — before encoding, so the resulting data URI is as small as possible. A 4 KB compressed PNG beats a 40 KB original both as a file and inlined.

Never Rely on Base64 for Privacy

Base64 is trivially reversible and offers no protection. Do not use it to obscure sensitive image content — anyone can decode it instantly, including with the tab on this page. If content must be protected, use real access controls and encryption on the server, and serve the image through an authenticated endpoint.

Frequently Asked Questions

What does this Image to Base64 converter do?

It reads an image you drop, paste, or select and encodes its bytes as a Base64 string — entirely inside your browser. You get the raw Base64, a ready-to-use data URI (data:image/png;base64,…), and copy-paste snippets for HTML , CSS background-image, Markdown, and JSON. A metadata bar reports the original file size, the encoded size, the exact percentage increase (Base64 is about 33% larger), the pixel dimensions, and the MIME type. Nothing is uploaded: the encoding runs locally via the FileReader API, so the same tool is safe for screenshots, internal assets, and unreleased artwork. To go the other way, use the Base64 → Image tab or our Base64 to Image decoder.

Are my images uploaded to a server?

No. Every step happens client-side in your browser using the FileReader API and JavaScript string encoding. Your image is never transmitted, never stored, and never logged. You can confirm this by opening your browser's Network tab — encoding an image triggers zero network requests. This makes the tool safe for sensitive material: product screenshots before launch, internal diagrams, customer assets, and anything under NDA. There is no file-size cap imposed by an upload limit, only the practical limit of how large a Base64 string your browser and target system can comfortably handle.

How much bigger does Base64 make an image?

Base64 encodes every 3 bytes of binary data as 4 ASCII characters, so the encoded string is roughly 33% larger than the original file (plus a few bytes of padding and the data: prefix). A 9 KB PNG becomes about 12 KB of text. This overhead is the single most important reason not to Base64 large images: you ship more bytes and, because the string is embedded in your HTML or CSS, those bytes are re-downloaded every time the containing file changes and cannot be cached independently. The tool shows the exact increase for your specific file in the metadata bar so you can make the call with real numbers.

When should I use a Base64 image instead of a normal file?

Base64 (as a data URI) is a good fit for small, rarely-changing assets where avoiding a separate HTTP request matters more than caching: tiny icons and logos inlined in CSS, images embedded in HTML email (many clients block external images but render data URIs), single-file widgets or bookmarklets that must be self-contained, SVG sprites, and images stored inside JSON/API payloads. A practical rule of thumb: under about 2 KB and used on one or two pages, inlining usually wins. The advice badge in this tool encodes exactly that heuristic — green under 2 KB, amber up to 10 KB, red above.

When should I NOT use Base64 images?

Avoid Base64 for anything large or reused across pages. Four concrete reasons: (1) the ~33% size increase means more bytes over the wire; (2) an inlined image cannot be cached on its own — it is re-downloaded with every change to the HTML or CSS that contains it, and repeated on every page that embeds it; (3) decoding a large data URI costs CPU and battery, which is noticeable on mobile; and (4) you lose responsive images (srcset/sizes) and lazy-loading. Since HTTP/2 multiplexes many small requests cheaply, the original reason to inline — cutting request count — rarely applies anymore. For photos, hero images, or anything over ~10 KB, a normal cached file almost always loads faster. If the goal is a smaller file, run it through our Image Compressor first.

How do I use the Base64 output in HTML and CSS?

For HTML, switch to the HTML tab and paste the generated element: . For CSS, use the CSS tab, which wraps the data URI in background-image: url("data:image/png;base64,…"). Both work anywhere a URL is accepted — img src, CSS background, mask-image, even favicon link tags. The data: scheme is supported by every modern browser. One caveat: very long data URIs in inline HTML can hurt readability and, in CSS, bloat the stylesheet that ships to every visitor, so reserve inlining for genuinely small assets.

Which image formats are supported?

PNG, JPEG/JPG, GIF (including animated), WebP, SVG, ICO, and BMP are all supported, plus AVIF where the browser can decode it. Because the tool encodes the raw bytes rather than re-rendering the image, animated GIFs stay animated, transparent PNGs keep their alpha channel, and SVGs remain fully scalable. The MIME type is read from the file itself and, when you paste raw Base64 into the decoder, inferred from the data's magic bytes. There is no format conversion during encoding — the output represents exactly the file you provided.

Why is SVG a special case?

SVG is XML text, not binary, so Base64 actually makes it larger and harder to read for no benefit. For inlining SVG in CSS or HTML, URL-encoding the markup (percent-encoding a handful of characters like #, <, >, and quotes) is usually smaller than Base64 and keeps the source legible and gzip-friendly. This tool still offers Base64 SVG output because some pipelines require it, but if you are hand-optimizing CSS, prefer a URL-encoded data URI. Our URL Encoder/Decoder helps with that approach.

Is Base64 the same as encryption?

No. Base64 is an encoding, not encryption — it is fully reversible by anyone with no key required. It exists to represent binary data using a safe set of printable ASCII characters so the data survives transport through systems that only handle text (HTML, JSON, email headers, URLs). Anyone can decode a Base64 string back to the original image in seconds, including with the Base64 → Image tab here. Never treat Base64 as a way to hide or protect sensitive image content; it provides zero confidentiality.

Can I embed a Base64 image in an email?

Yes, and it is one of the better uses of the technique. Many email clients block externally hosted images by default for privacy, which breaks layouts that rely on remote logos. Embedding small images as data URIs ensures they render immediately without a server fetch. The trade-offs: some older clients (notably certain versions of Outlook) have spotty data-URI support, and large embeds inflate the message size that every recipient downloads. Keep embedded images small — logos and icons, not photographs — and test across your target clients.

Why does my Base64 image not render?

The most common causes: a missing or wrong MIME type in the data: prefix (use image/png for PNG, image/jpeg for JPG, image/svg+xml for SVG), whitespace or line breaks accidentally inserted into the string, a truncated copy that dropped the trailing padding (= or ==), or pasting only the raw Base64 without the data:…;base64, prefix where a URL is expected. The decoder in this tool is tolerant — it strips whitespace, accepts input with or without the prefix, and infers the MIME from the image's magic bytes — so pasting your string into the Base64 → Image tab is the fastest way to confirm whether the data itself is valid.