Image to Base64

An Image to Base64 converter encodes an image file into a Base64 data URI you can paste directly into HTML or CSS, and decodes a data URI back into a downloadable image — all in your browser with no upload.

Drop an image or click to choose. Nothing is uploaded.

About Image to Base64

Drop an image to get its exact bytes as a data: URI, ready to inline as an img src, a CSS background-image, or anywhere a URL is accepted — with one-click copy for each. It reports the encoded size and warns when a data URI is large enough that a normal file reference would be better. Flip to decode mode to paste a data URI (or raw Base64), preview the image, and download it. Encoding uses the browser's FileReader so the original bytes are preserved exactly — no lossy re-encoding.

What Image to Base64 does

Encode any image to a Base64 data URI
Ready-made HTML img and CSS background-image snippets
Decode a data URI or raw Base64 back to a downloadable image
Preserves original bytes (FileReader, no re-encode)
Size readout with a warning for oversized data URIs
Runs entirely in your browser — nothing uploaded

When to reach for Image to Base64

Inlining a small icon or logo into CSS to save an HTTP request
Embedding an image directly in an HTML email or template
Pasting an image into a JSON payload or data attribute
Recovering an image from a data URI copied out of dev tools

How to use Image to Base64

01
Choose a direction
Pick Image to Base64 or Base64 to Image.
02
Provide the input
Drop an image to encode, or paste a data URI/Base64 to decode.
03
Copy or download
Copy the data URI or HTML/CSS snippet, or download the decoded image.

When to use Image to Base64 vs alternatives

Alternative	Use Image to Base64 when…	Use the alternative when…
Command-line base64	you want the ready-to-paste HTML/CSS wrappers and a live preview, on any device.	you're scripting encoding in a build pipeline.
Referencing an image file normally	the image is tiny and you want to avoid an extra request.	the image is more than a few KB — a file reference caches better and keeps HTML/CSS small.

Frequently asked questions

What is a Base64 data URI?

It's a way to embed a file's bytes directly in text using the data: scheme, e.g. data:image/png;base64,iVBORw0... A browser treats it as if it were a URL to the image, so you can inline images in HTML or CSS.

When should I inline an image as Base64?

For very small, critical images (tiny icons, a 1px gradient) where avoiding a separate request matters. Base64 adds ~33% size and can't be cached separately, so it's a poor fit for anything more than a few KB.

Can I convert Base64 back to an image?

Yes. Switch to 'Base64 to Image', paste a full data URI or the raw Base64, preview it, and download the decoded file.

Does encoding change my image?

No. The original file bytes are read with FileReader and Base64-encoded verbatim — there's no canvas re-encode, so quality and format are untouched.

Is my image uploaded?

No. Encoding and decoding happen locally in your browser; the image never leaves your device.

Image Compressor

Shrink JPEG/WebP images to a target size, in your browser.

Image Format Converter

Convert PNG, JPEG and WebP — bulk, in your browser.

Base64 Encoder / Decoder

Encode text to Base64 and decode it back, all offline.

Related concepts

Base64
Base64 is a way of encoding arbitrary binary data as a string of 64 ASCII characters (A–Z, a–z, 0–9, '+', '/') so it can travel through systems that only handle plain text — like email, URLs, JSON, or HTML data URIs.