How to Convert an Image to Base64 (and Back)

Published October 11, 2026

Free tool: Image to Base64→

Base64 turns an image file into plain text, so it can be pasted straight into HTML, CSS, JSON or an email template instead of being linked as a separate file. It's handy for small icons and for systems that only accept text. This guide explains how Base64 and data URIs work, when embedding an image is a good idea, and how to convert images both ways with the free Image to Base64 converter.

What Base64 is

Computers store images as binary data, which can't be pasted into text formats safely. Base64 encodes that data using only 64 ordinary characters (letters, digits, + and /), so it survives being copied into code, JSON or email. The catch is size: Base64 text is about 33% larger than the original file, because every 3 bytes become 4 characters.

What a data URI looks like

To use Base64 in a web page, wrap it in a data URI, which tells the browser what kind of file it is:

data:image/png;base64,iVBORw0KGgo…

You can then use it anywhere a normal image address goes: in an HTML <img> tag, a CSS background-image, or a Markdown image.

When embedding images makes sense

Good uses:

• Tiny icons and logos, a few kilobytes at most, to save extra requests
• Self-contained HTML files, such as a report you send as a single file
• APIs and JSON that need to carry an image as text
• Test data and prototypes

Better avoided:

• Large photos. They make HTML and CSS files much bigger and slower to load.
• Images used on many pages. A normal image file is cached once by the browser; an embedded one is downloaded again with every page.
• Email newsletters. Many email programs block or strip data URI images, so attached or linked images are more reliable.

How to convert an image to Base64 with Graph Maker

1. Open Image to Base64 and keep the conversion direction on Image to Base64.
2. Add an image: PNG, JPG, GIF, WebP, SVG, ICO, BMP and AVIF files work.
3. Choose the output: a data URI, Base64 only, an HTML <img> tag, a CSS background-image, a Markdown image or a JSON string.
4. Copy the result to your clipboard and paste it where you need it.

Converting Base64 back to an image

1. Switch the direction to Base64 to Image.
2. Paste the Base64 text or a full data URI.
3. Preview the image and download it as a normal image file.

Conversions happen in your browser, so neither your images nor your text are uploaded.

Frequently asked questions

How do I embed an image in HTML with Base64?

Convert the image and choose the HTML <img> tag output. The tool gives you a ready-made tag with the data URI in its src attribute; paste it into your page.

Does Base64 make images bigger?

Yes, by about a third. A 3 KB icon becomes about 4 KB of text, which is fine for small images but wasteful for large ones.

How do I turn Base64 text back into an image?

Switch the tool to Base64 to Image, paste the text or data URI, and download the decoded image.