When should I use a Base64 data URI for an image?

For very small icons embedded in CSS or HTML — saving an HTTP request can be worth it for under-1KB images. Above that, prefer a real file: Base64 increases byte size by ~33% and bypasses HTTP caching.

Does the encoded string work in CSS?

Yes. Use it as background-image: url(data:image/png;base64,…). Make sure the MIME type matches the image type or some browsers will refuse to render it.

No. Encoding uses FileReader; decoding uses the browser. Nothing leaves your device.

SnapTools

Files never leave your device

Image to Base64 / Base64 to Image

Convert images to Base64 strings (data URIs) and decode Base64 back to images. Useful for embedding images in HTML, CSS, and JSON.

Drag and drop a file here

or click to browse

Any common image format

How to use Image to Base64

Choose "Image → Base64" or "Base64 → Image".
Drop an image, or paste a data URI.
Copy the data URI, or download the decoded image.

How to use Image to Base64

Frequently asked questions

When should I use a Base64 data URI for an image?

Does the encoded string work in CSS?

Are images uploaded?