How to Convert Images to Base64

Base64 turns an image into a long string of text. That’s the simplest way to explain it. Instead of having a separate file like logo.png sitting in a folder, you get a chunk of letters and numbers that represents the exact same image. You can paste that string straight into your code.

Why would you want that? Sometimes you need the image to live inside the document itself, not as an external file. That’s what Base64 is for.

When Base64 makes sense

Email templates. Most email clients block external images by default. If you embed a small logo or icon as Base64 directly in the HTML, it shows up right away without the recipient having to click “load images.” I use this for transactional emails and it works well.

Single-file HTML projects. CodePen demos, documentation pages, bookmarklets. When you want everything in one file with no external dependencies, Base64 is the way to go. I built a status page template last year that was a single HTML file with all icons encoded inline. Shared it with the team by sending one file instead of a zipped folder.

CSS background images for tiny UI elements. Buttons, bullets, decorative lines. If the image is under 2KB, inlining it as Base64 in your stylesheet saves a network request. That’s one fewer HTTP connection the browser has to make.

API payloads. Some APIs expect images as Base64 strings in the JSON body rather than file uploads. Stripe does this for dispute evidence. Twilio does it for MMS attachments in some configurations. If you’re working with APIs, you’ll run into this eventually.

When to avoid Base64

Base64 encoding makes files about 33% larger than the original binary. Always. There’s no way around it. So if you encode a 500KB photo, you end up with roughly 667KB of text.

That means Base64 is a bad idea for:

• Large photos or banners. You’re just making the page heavier for no benefit.
• Images that appear on multiple pages. A Base64 image in your CSS gets re-downloaded every time because the browser can’t cache it separately from the stylesheet.
• Anything over 10KB or so. The file size penalty starts to outweigh the convenience pretty fast.

I made the mistake once of encoding a 2MB hero photo as Base64 in an HTML file. The page took forever to render because the browser had to parse this enormous string of text before it could show anything. Learned that lesson the hard way.

How to convert images to Base64

I use the ImgPrism Base64 converter for this. Runs in your browser, nothing gets uploaded anywhere.

1. Open the tool

Go to imgprism.com/en/base64/. You’ll see a drop zone right away.

2. Upload your image

Drag the file onto the page or click to browse. It takes JPG, PNG, GIF, WebP, BMP, and SVG.

3. Choose encode or decode

The tool defaults to encode, which converts your image to a Base64 string. If you already have a Base64 string and want to get the image back, switch to decode. Works both directions.

4. Copy the result

The encoded string appears below the image. Click copy. The tool gives you the full data: URI with the MIME type included, so you can paste it straight into an src attribute or a CSS property. Or grab just the raw Base64 string if that’s what your API needs.

Takes about three seconds. I timed it.

Real test: file size vs. string length

I converted four different images to see how the Base64 string length compares to the original file size. Here’s what I got:

Image	Type	Original Size	Base64 String Size	Increase
Favicon icon	PNG	1.0 KB	1.3 KB	33%
Small logo	PNG	10 KB	13.3 KB	33%
Product thumbnail	JPEG	100 KB	133 KB	33%
Full-res photo	JPEG	1.0 MB	1.33 MB	33%

The 33% increase is consistent. That’s just how Base64 works. It encodes 3 bytes of binary data into 4 characters of text. The math is fixed.

The favicon at 1.3KB is totally fine to inline. The full-res photo at 1.33MB of text? Don’t do that to your users.

How to use the Base64 string in code

In an HTML img tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" alt="Logo">

Just paste the full data URI into the src attribute. The browser decodes it and renders the image like normal.

In CSS as a background image:

.button-icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PC9zdmc+");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

Works the same way. The url() function accepts data URIs just like it accepts file paths.

One thing to watch out for: some older email clients clip HTML messages that exceed 100KB. If your Base64 strings push the total email size over that limit, the message gets truncated. Keep your inline images small and you’ll be fine.

Related tools

If you’re working with images for the web, these might save you some time:

• Compress images to shrink file sizes before encoding them
• Convert formats to switch between JPG, PNG, WebP, and more

All browser-based. No uploads, no accounts, no nonsense.