Image to Base64 Converter

Turn a JPG, PNG, GIF, WebP, SVG or other image into a Base64 data URL, ready to paste into HTML, CSS, JavaScript or JSON. The conversion runs in your browser, so the image isn't uploaded.

Choose an image

or drag it here, or paste it with Ctrl+V / ⌘V. Up to 10 MB.

Privacy: the image is read by JavaScript on this page and never sent to Orbit2x or anyone else.

How to Convert an Image to Base64

Choose an image, drag it onto the box, or paste one from the clipboard.
Copy the format you need: the full data URL, the Base64 text on its own, an HTML <img> tag or a CSS background-image rule.
Paste it into your HTML, CSS, JavaScript or JSON.

The result also shows the original and encoded sizes and the image's dimensions. Any format your browser can read works, including JPG, PNG, GIF, WebP, AVIF, SVG, BMP and ICO.

What a Data URL Contains

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

data: marks it as a data URL rather than a link to a file.
image/png is the MIME type, which tells the browser how to decode the bytes.
;base64, says the data that follows is Base64-encoded.
The rest is the image itself, as text. Base64 uses A–Z, a–z, 0–9, + and /, with = as padding at the end.

The format is defined in RFC 2397; MDN's data URL guide covers browser behaviour.

When Base64 Images Make Sense

Good uses

Small icons and UI graphics used in a single stylesheet
Self-contained HTML files, reports and demos that must work offline
Images sent inside JSON, such as thumbnails or generated QR codes
Test fixtures and placeholder images in code

Use a normal image file instead for

Photos and anything larger than a few kilobytes
Images reused on many pages, which benefit from being cached once
Responsive images with srcset, and lazy-loaded images
Images you want to appear in image search
Email, where many clients don't show data: images

With HTTP/2 and HTTP/3, extra image requests cost much less than they used to, so the old advice to inline every small icon matters less today. For SVG icons, a URL-encoded data URI is often smaller than Base64: see the SVG to data URI converter.

Using the Output

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Company logo" width="150" height="50">

/* CSS */
.icon-home {
  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
  background-size: contain;
}

// JavaScript
const logo = 'data:image/png;base64,iVBORw0KGgo...';
document.querySelector('#logo').src = logo;

In HTML, keep a meaningful alt text as you would for any image. CSS backgrounds have no alt text, so use them only for decoration.

Frequently Asked Questions

Does Base64 make the image bigger?

Yes, by about a third: every 3 bytes become 4 characters. A 10 KB PNG becomes roughly 13.3 KB of text. Over the network, gzip or Brotli compression on the server wins back most of that overhead, because Base64 text compresses well; the bigger cost is that the image can no longer be cached or loaded separately from the file it's embedded in.

Is the image uploaded?

No. The page reads the file with the browser's FileReader API and builds the data URL locally. You can confirm in your browser's developer tools: choosing a file makes no network request.

Do Base64 images work in email?

Not reliably. Gmail doesn't display data: images, and several versions of Outlook block or strip them, while Apple Mail usually shows them. For email, attach the image with a Content-ID (cid:) reference or link to a hosted file, and test in the clients your readers use.

Can I turn Base64 back into an image?

Yes. Base64 is an encoding, not encryption. Paste the data URL into a browser's address bar to view it, or decode it with atob() in JavaScript or base64 -d on the command line.

Are Base64 images good for SEO?

Not for images you want found. Google Images works with image files at their own URLs, and data URLs have no URL of their own to index. Use them for icons and decoration, and regular files for photos and product images.

Will browsers cache Base64 images?

Only as part of the file that contains them. An image embedded in a stylesheet is cached with the stylesheet, so changing the image means re-downloading the whole file, and the same image used on several pages is downloaded again inside each page's HTML.