How to convert an image to Base64
- Keep the Image → Base64 tab selected and drop an image into the box.
- Check the preview, dimensions and how much larger the text version is than the file.
- Copy the Data URI, Base64 only, CSS background or HTML img snippet with one click.
- To decode, switch to Base64 → Image, paste a data URI or raw Base64, click Decode and download the file.
What you can do with Image to Base64
- Four ready snippets
- Get the full data URI, the bare Base64 string, a background-image CSS rule and an img tag, each with its own copy button.
- Base64 to image decoder
- Paste a data URI or raw Base64 and preview the decoded image with its dimensions, type and size, then download it.
- Format detection
- The decoder reads the file signature to identify PNG, JPG, GIF, WebP, BMP, ICO, AVIF or SVG and names the download correctly.
- Forgiving input
- Whitespace, line breaks, URL-safe characters and missing padding are cleaned up automatically before decoding.
- Size warning
- Shows the size increase as text and warns when an image is over 100 KB, where inlining usually hurts page speed.
Base64 data URIs: how they work and when to inline images
Base64 turns binary data into plain text using 64 safe characters, so an image can live inside HTML, CSS, JSON or an email template instead of being a separate file. A data URI wraps that text with the MIME type, for example data:image/png;base64, followed by the encoded bytes. Browsers render it like a normal image URL. The catch is size: Base64 encodes every 3 bytes as 4 characters, so the text is about 33 percent larger than the original file, and it can't be cached separately from the page that contains it.
Inlining makes sense for small assets such as icons, tiny logos, loading spinners or placeholder images under a few kilobytes, where saving an extra HTTP request outweighs the size cost. It is also handy for single-file HTML reports, email signatures and test fixtures. For photos and anything over roughly 10 to 20 KB, a normal image file is faster. SVG files are text already, so compress them first and consider URL-encoding instead. When decoding, you can paste either the full data URI or just the Base64 part.
Frequently asked questions
Is my image uploaded when I convert it to Base64?
No. The file is read by your browser with the FileReader API and encoded on your device. Decoding also happens locally. Nothing you drop or paste is sent to a server, so it is safe for private images or internal assets.
How do I use a Base64 image in CSS?
Copy the CSS background snippet, which looks like background-image: url("data:image/png;base64,..."); and paste it into your stylesheet rule. The image loads with the CSS file itself, with no separate request. This works best for small icons and patterns.
How do I convert Base64 back to an image?
Switch to the Base64 → Image tab, paste the string, with or without the data:image prefix, and click Decode. The tool detects the real format from the file bytes, shows a preview, and lets you download it with the correct extension.
Why is the Base64 string bigger than my image?
Base64 represents every 3 bytes of binary data with 4 text characters, so the output is about 33% larger, plus the short data URI prefix. The tool shows the exact increase. That overhead is why inlining is best kept for small images.
Is there a size limit?
There is no fixed limit, but very large images create strings of many megabytes that can make the page slow to display and copy. The tool warns above 100 KB. For general Base64 text encoding and decoding, use the separate Base64 tool.