How to Convert an Image to Base64 (Data URI)

To turn an image into Base64, open the Image to Base64 Converter, add the image, and choose an output format: Data URI, Base64 only, an HTML img tag, a CSS background, Markdown or JSON. Copy the result and paste it into your code. To go the other way, switch to Base64 → Image and paste a Base64 string or data URI to see and download the picture.

Encode an image step by step

1. Open the Image to Base64 Converter.
2. Keep the direction on Image → Base64, and add your image.
3. Choose the output format:
   • Data URI — data:image/png;base64,… ready to use as an image address.
   • Base64 only — just the encoded text, for APIs and JSON fields.
   • HTML img — a complete img tag.
   • CSS background — a background-image rule.
   • Markdown — an image you can paste into Markdown.
   • JSON — a JSON-safe string.
4. Copy the result.

The tool also shows the image's type, dimensions and file size.

Decode Base64 back to an image

1. Switch the direction to Base64 → Image.
2. Paste the Base64 text or data URI — even a CSS url(…) or an img src works.
3. The image appears, with its declared type and dimensions, and you can download it.

It's handy for debugging: checking what an API returned, or recovering an image embedded in a stylesheet or an email's source.

What Base64 is

Base64 writes a file's bytes as plain text using 64 safe characters (A–Z, a–z, 0–9, + and /). That lets binary data like an image travel inside text formats — HTML, CSS, JSON, XML, email — instead of as a separate file. A data URI adds the file type in front, so browsers can display it directly:

data:image/png;base64,iVBORw0KGgo…

When embedding helps

• Tiny icons and logos in CSS or HTML, saving a separate request for each.
• Single-file documents: an HTML page or a report that must work offline with no external files.
• APIs and JSON that expect images as strings.
• Prototypes and code samples where you want everything in one place.

When it hurts

• Base64 is about 33% bigger than the original file — every 3 bytes become 4 characters.
• Embedded images can't be cached separately. A logo embedded in every page is downloaded again with every page.
• Large images bloat your HTML or CSS and slow down the first render.
• Email support is patchy: some email clients, including popular webmail services, don't display Base64-embedded images. Test before relying on it, or host the image and link to it.

Rule of thumb: embed only small images — a few kilobytes. For anything larger, use a normal image file.

Make it small first

Before encoding, shrink the image:

• Compress it with the Image Compressor.
• Convert photos to WebP or JPG with the Image Converter; keep PNG for small icons with transparency.
• Resize it to the size it will be displayed at.

The smaller the file, the shorter the Base64 string.

Favicons and icons

For website icons, a normal favicon file is better than Base64. The Favicon Generator makes every size browsers and phones need.

Frequently asked questions

Is my image uploaded?

No. Encoding and decoding happen in your browser.

Is Base64 encryption?

No. It's an encoding anyone can reverse instantly. Don't use it to hide anything.

Why does my decoded image say the format is unknown?

The text may be truncated, include extra characters, or not be an image at all. Make sure you copied the whole string.