Image to Base64 Converter

Base64 writes any file as plain text, using 64 characters: A to Z, a to z, 0 to 9, + and /, with = as padding at the end. Every 3 bytes of the file become 4 characters, so the text is a third bigger than the file.

A data URI puts that text behind a short header saying what kind of file it is. Browsers treat the whole thing as an image’s address, so it works anywhere an image URL does:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Your file is encoded exactly as it is, byte for byte: nothing is resized or compressed again.

To go the other way, choose Base64 to image at the top of the tool: paste Base64 or a data URI and download the image it contains. There’s more on that in the Base64 to image guide.

In CSS, give the element a size, because a background image doesn’t set one:

.icon {
  width: 32px;
  height: 32px;
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
}

In HTML, set the width and height too, and write alt text that describes the image:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Company logo" width="32" height="32">

In JavaScript, fetch() turns a data URI back into a Blob you can upload, and in Node.js, Buffer turns Raw Base64 back into the file:

// Browser: data URI to Blob
const blob = await (await fetch(dataUri)).blob();

// Node.js: Raw Base64 to a file
import { writeFileSync } from 'node:fs';
writeFileSync('logo.png', Buffer.from(base64, 'base64'));

A data URI saves a separate download, but makes the image bigger and ties it to the file it’s in. It’s worth it for:

• Tiny icons and graphics, a few kilobytes at most, where saving a request matters more than the extra third.
• Single-file HTML, such as reports, prototypes and offline pages that must work without separate image files.
• Emails, where a small image travels inside the message. Support varies between email apps, and Gmail cuts off messages over about 102 KB, so keep images tiny and send yourself a test.
• Code that needs an image as text, such as JSON APIs and test fixtures.

Avoid it for photos and anything larger:

• It’s a third bigger. A 192 KB photo becomes 257 KB of text. The gzip or Brotli compression most web servers use wins much of that back in transfer, but the browser still handles the full text.
• It can’t be cached on its own. A normal image file is downloaded once and reused by every page. An inlined one comes again with every page or stylesheet that contains it, and changing it means downloading the whole file again.
• It can delay the page. Browsers wait for stylesheets before showing a page, so big data URIs in CSS hold everything up.
• Lazy loading can’t help, because the image arrives with the HTML.

For bigger images, compress or resize them and serve them as normal files.

The Base64 text is made by your browser, on your own device, so your image is never uploaded. That matters for unreleased designs and client work.

You can check this yourself: open your browser’s developer tools, watch the Network tab and add an image. The only requests are the page’s own files and anonymous page-view counts, described in our privacy policy. After your first visit, the converter works offline too.