Image Tools

Image to Base64

Convert an image into a Base64 data URI for HTML, CSS or JSON.

Preview

What does Image to Base64 do?

Base64 is a way of writing binary data, such as an image file, using only letters, numbers and a few symbols. Once an image is written as Base64 text, you can put it straight inside an HTML file, a CSS stylesheet, a JSON response or an email template, without a separate image file. The browser decodes the text back into a picture when the page loads.

How to use the converter

  1. Choose an image from your device. Small icons, logos and simple graphics work best.
  2. Select the output you need: a full data URI, plain Base64, an HTML <img> tag or a CSS rule.
  3. Click Copy and paste the code into your project.

What a data URI looks like

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

It starts with data:, followed by the file type (MIME type), the word base64 and a comma, then the encoded image. Every 3 bytes of the original file become 4 characters of text, which is why Base64 is about 33 percent larger than the original file.

When to embed images, and when not to

Good uses: tiny icons and small background patterns, images in HTML emails where external images are blocked, single-file HTML reports, and placeholder images while larger pictures load.

Avoid it for: large photos. Embedded images cannot be cached separately by the browser, they make your HTML or CSS bigger and slower to download, and they are harder to update. For anything over about 10 to 20 KB, a normal image file is usually faster.

Frequently asked questions

Can I turn the Base64 back into an image?

Yes. Use our Base64 to Image tool to preview and download it as a file again.

Does Base64 encryption protect my image?

No. Base64 is an encoding, not encryption. Anyone can decode it, so do not use it to hide private images.

Is my image sent to a server?

No. The file is read with your browser's FileReader feature and stays on your device.