How to Convert an Image to Base64 (and When You Shouldn't)

Base64-encoding an image turns its raw bytes into a plain text string, so you can embed it directly inside HTML, CSS, or JSON instead of hosting it as a separate file. Our Image to Base64 Converter does this entirely in your browser — upload an image, get back a raw base64 string, a full data: URI, and a ready-to-use <img> tag.

How to do it

1. Open the Image to Base64 Converter.
2. Drop in a JPG, PNG, WEBP, GIF, or BMP file (up to 20 MB).
3. Copy whichever output you need:
   • Raw base64 — just the encoded string, if you’re building the data: URI yourself in code.
   • Data URI — paste directly into an <img src="..."> or a CSS background-image.
   • HTML img tag — a complete <img> element, ready to paste.

Everything happens locally using the browser’s FileReader/ArrayBuffer APIs — the image is never uploaded anywhere.

The real trade-off: size

Base64 encodes every 3 bytes of binary data as 4 text characters, so the encoded string is roughly 33% larger than the original file. A 100 KB image becomes about 133 KB of text. That’s not a rounding error — on a page with several images, it adds up fast, and unlike a normal image file, that inflated text can’t be cached separately by the browser; it’s baked into whatever HTML/CSS file it’s embedded in and gets re-downloaded every time that file does.

When base64 is actually the right call

• A small icon inside a CSS file, where avoiding one extra HTTP request is worth a small size increase.
• Inline images in an HTML email, where external images are often blocked by the recipient’s mail client anyway.
• A single-file HTML prototype or demo, where you want zero external dependencies.
• Quickly testing how an image looks as a data URI before deciding whether to host it properly.

When to use a real hosted file instead

• Any image meant for a live, production website — a hosted file can be cached, compressed, and served from a CDN; a base64 string baked into your CSS or HTML cannot.
• Anything larger than a small icon. The 33% overhead on a large photo is a real cost with no offsetting benefit.
• Anything you’ll reuse across multiple pages — a hosted file is fetched once and cached; a base64 string embedded on every page is downloaded again with every page load.

Base64 is a genuinely useful trick for specific, small-scale cases — not a general replacement for hosting your images properly.

Try the Image to Base64 Converter →