Image to Base64 Converter (and Base64 to Image)

What is an image to Base64 converter?

Base64 is a way of writing binary data using only 64 safe text characters (A–Z, a–z, 0–9, + and /). Converting an image to Base64 lets you embed it directly inside HTML, CSS, JSON or an email template as a data URI instead of linking to a separate file:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

The part before the comma declares the MIME type; the rest is the encoded file. Browsers treat it exactly like an image URL, so it works in <img src>, CSS background-image, <link rel="icon"> and canvas code.

The 33% size overhead

Base64 stores every 3 bytes of the file as 4 characters, so the encoded string is about 33% larger than the original (plus the short data: prefix). Gzip or Brotli on your server recovers part of that, but the bigger costs are structural: an inlined image is downloaded again with every HTML or CSS file that contains it, cannot be cached on its own, and makes your stylesheet — which blocks rendering — heavier.

When to inline images (and when not to)

• Good fit: small icons, loaders and UI sprites under a few KB, images in HTML email signatures where external images are blocked, single-file HTML reports, and test fixtures in code.
• Bad fit: photos, hero images and anything above roughly 10–20 KB. Serve those as normal files with caching, compression and loading="lazy". Shrink them first with the Image Compressor.

SVG: URL-encoding beats Base64

SVG is already text, so you don’t need Base64 at all. A URL-encoded data URI such as data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… only escapes a few characters (<, >, #, %) and is typically 20–30% shorter than the Base64 version — and it stays readable and gzips better. This tool offers both for SVG files. If you work with SVG in CSS a lot, the SVG to CSS tool helps too.

Decoding Base64 back to an image

Paste a full data URI or a bare Base64 string (base64url with - and _ also works). The tool detects the real format from the file’s magic bytes — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO or BMP — shows a preview with dimensions, and lets you download the file with the right extension. For Base64 that isn’t an image, use the general Base64 Encoder/Decoder.

Tools that pair well with the Image to Base64

• Favicon Generator — Make a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch icon, Android/PWA icons, a Webflow webclip, the web manifest and the HTML tags to paste.
• Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background colour — all locally in your browser.
• OG Image Generator — Create a polished link-preview image for Facebook, LinkedIn, X, Slack and WhatsApp in seconds — pick a template, type your title, add a logo, then download the PNG and matching meta tags.
• QR Code Generator — Generate a QR code for a link, Wi-Fi login, contact card, email, phone number or SMS.