How to use the Image to Base64 Converter
- Drop images on the box, click it to choose files, or paste an image with Ctrl+V (⌘V on a Mac).
- Pick the Output format: data URI, Base64 only,
<img>tag, CSS background, Markdown or a JSON string. - Click Copy under the image, or download the code as a .txt file.
What is a Base64 image?
Base64 writes a file's bytes as plain text, so an image can live inside HTML, CSS, JSON or an email instead of being a separate file. With a data URI prefix the browser knows what it is:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="">
When to inline an image
- Good for small icons, logos and backgrounds under a few KB, HTML emails, single-file HTML pages, and sending images through JSON APIs.
- Avoid for photos and large images. Base64 makes files about 33% bigger, and inlined images can't be cached separately, so pages load slower.
Shrink big images first with the image compressor on our sister site, curlytab.
Turning Base64 back into an image
Paste the code into the Base64 decoder in Decode mode. It recognizes images, shows a preview and lets you download the file.
Frequently asked questions
Are my images uploaded?
No. They're read and converted in your browser, and nothing is sent to a server.
Which image formats work?
PNG, JPG, GIF (including animated), WebP, AVIF, SVG, ICO and BMP: any image file your browser can open.
Why is the Base64 bigger than the image?
Base64 uses 4 text characters for every 3 bytes, so it's about a third larger than the original file.
How do I use it in CSS?
Choose CSS background and paste the result into a rule: background-image: url("data:image/png;base64,…");
Updated