Image to Base64 Converter — Data URI, CSS & HTML

Drop an image here

or click to browse, or paste with Ctrl+V — PNG, JPG, WebP, GIF, SVG. Encoded on your device, never uploaded.

Choose image

Data URI Raw Base64 <img> tag CSS background

This file is large for inlining — Base64 belongs in HTML/CSS only for small images (roughly under 10 KB). Consider compressing first, or hosting the file normally.

Output

Original –Encoded –Overhead –

Working with images and documents all day?

Kaizen OCR & PDF handles the heavyweight jobs — OCR, PDF conversion, merging, compression — entirely offline on Windows. Your files, your machine, no cloud.

See features

Related browser tools: PNG to WebP and Compress Image.

What Base64 encoding actually does

Base64 re-writes binary data using 64 text-safe characters, so an image can travel anywhere plain text can: inside an HTML file, a CSS rule, a JSON payload or an API request. Wrapped as a data URI (data:image/png;base64,…) the browser renders it like any other image — no separate file, no extra HTTP request.

When inlining helps — and when it hurts

Good: tiny icons and logos (<10 KB), single-file HTML emails and reports, demo pages, images embedded in JSON, quick prototypes without asset hosting.
Bad: photos and anything sizeable — Base64 adds ~33% to the file size, can't be cached separately from the page, and bloats every load. That's why the tool warns above 10 KB.

The four output flavours

Output	Paste it into
Data URI	Anywhere a URL goes — src attributes, CSS url(), markdown images
Raw Base64	JSON fields, APIs and code that adds its own data: prefix
<img> tag	HTML — ready to drop in, alt attribute waiting to be filled
CSS background	A stylesheet rule, complete with url() wrapper

Shrink before you encode

Since Base64 multiplies whatever size you feed it, optimise first: convert to WebP with PNG to WebP, squeeze it with Compress Image, or scale it down with Resize Image — then encode the small version here. Going the other way (you have Base64 and want a file), paste the data URI into your browser's address bar and save the image; the free tools collection has converters for whatever format comes out.

Frequently asked questions

Why is Base64 bigger than the original image?

Base64 represents every 3 bytes of binary as 4 text characters, a built-in +33% overhead. It trades size for portability — the image becomes copy-pasteable text.

What's the difference between Base64 and a data URI?

The data URI is the Base64 string plus a header (data:image/png;base64,) telling the browser what it's looking at. Browsers need the full URI; many APIs want only the raw Base64 — the toggle above gives you either.

Does inlining images with Base64 make my site faster?

Only for very small images, where saving an HTTP request outweighs the 33% weight penalty. For anything over ~10 KB it usually makes pages slower, because inlined images can't be cached separately.

Is there a size limit?

Browsers handle multi-megabyte data URIs, but pasting one into HTML or CSS is almost always a mistake — hence the warning. For big files, host them normally and link.

Is my image uploaded during encoding?

No. The FileReader API encodes it right in your browser — the file never leaves your device, and the tool works offline.