Image to Base64
Turn images into Base64 data URIs, HTML and CSS code, or decode back.
What is Base64 image encoding?
Base64 is a way of writing binary data, such as an image file, using only plain text characters. A Base64 image is usually written as a data URI, which looks like data:image/png;base64,iVBORw0KGgo.... Browsers can display a data URI directly, so you can embed a small image inside HTML, CSS, JSON, an email template or a single file app without hosting a separate image file.
This tool works in both directions. It encodes any image into a data URI and gives you ready made HTML and CSS snippets, and it decodes a pasted Base64 string back into an image you can preview and download. Everything happens in your browser.
How to convert an image to Base64
- Open the Image to Base64 tab and drop an image or click to choose one.
- Copy the full data URI, or use Copy Base64 only for the raw string without the prefix.
- Copy the HTML img tag to paste straight into a page, or the CSS background rule for a stylesheet.
- Use Download .txt to save the string as a text file.
How to decode Base64 to an image
- Open the Base64 to Image tab.
- Paste a full data URI or a plain Base64 string.
- Press Decode. The tool detects the image type, shows a preview with the dimensions and lets you download the file.
Features
- Encode and decode in one place.
- Ready to use snippets for HTML and CSS.
- Size statistics showing the original size, string length and the size increase.
- Automatic type detection for PNG, JPG, GIF, WebP, BMP, SVG, ICO and AVIF when decoding plain Base64.
- Tolerant decoding that ignores line breaks and accepts URL safe Base64.
When should you use Base64 images?
Base64 is useful for small icons, tiny logos and simple graphics, typically under about 10 KB. Embedding them saves a network request and keeps a component self contained. It is also handy for HTML email signatures, test fixtures, JSON APIs that expect image data and quick prototypes. However, Base64 text is about one third larger than the original file, and embedded images cannot be cached separately by the browser. For photos and large images, a normal image file is almost always the better choice.
Tips
Compress or resize an image before encoding it to keep the string short. SVG icons are often smaller still when embedded as plain SVG code. If a decoded image will not display, make sure you copied the entire string, since a missing end is the most common cause.
Frequently asked questions
Why is the Base64 string bigger than my image?
Base64 uses four text characters for every three bytes of data, so the encoded text is about 33% larger than the original file.
Can I decode a string without the data:image prefix?
Yes. Paste the plain Base64 text and the tool detects the image type from the first bytes of the data.
Is there a size limit?
You can encode images up to 15 MB. Base64 works best for small images, and very long strings can make pages and editors slow.
Is my image uploaded?
No. Encoding and decoding happen in your browser and nothing is sent to a server.