HelperCrateImage to Base64
Two-way, developer-friendly Base64 encoder/decoder with ready-to-paste snippets.
Your files never leave your device. Everything runs in your browser.
What Image to Base64 does
Image to Base64 converts a picture into a Base64 string that can be embedded directly in HTML, CSS, Markdown, JSON or code, and it also decodes Base64 text or data URIs back into an image file. It is the tool to reach for when you need a small icon inline in a stylesheet, or when an API expects an image as text.
The encoder supports JPG, PNG, WebP, GIF, SVG and BMP, works with multiple files, and offers ready-made output formats: a full data URI, raw Base64, a CSS rule, an HTML tag snippet, or Markdown image syntax. A size chip shows how much larger the text version is compared with the original file.
For decoding, paste a data URI or a snippet copied from code and the tool detects the format automatically, then lets you download the recovered image.
How to use Image to Base64
- Open the Image → Base64 tab and drop files onto the page, browse, or paste an image.
- Choose the output style: Data URI, Raw Base64, CSS, HTML or Markdown. Enable Wrap long lines if the string will be pasted into code.
- Copy the result with the copy button, download it as a .txt file, or grab every file at once as a ZIP.
- To go the other way, switch to the Base64 → Image tab, paste the text or data URI, and click Decode to image.
- Download the decoded image, or use Paste from clipboard to load Base64 text without typing.
Features
- Batch encoding of JPG, PNG, WebP, GIF, SVG and BMP files into Base64 text.
- Five output formats: data URI, raw Base64, CSS rule, HTML snippet and Markdown syntax.
- Optional line wrapping for code-friendly output, plus copy and .txt download per file.
- Data URI and snippet decoding back to a downloadable image, with automatic format detection.
- A size overhead indicator showing how much the text version grows compared with the binary file.
- Everything runs locally — no server ever sees the image or the string.
Tips and common mistakes
- Leave Wrap long lines enabled when pasting into code editors, which often have line length limits.
- Use raw Base64 for APIs that expect the payload without a data URI prefix, and the data URI format for HTML and CSS.
- Keep source images small before encoding — run them through the Image Compressor first so the embedded string stays manageable.
Frequently asked questions
Why is the Base64 version bigger than my image?
Base64 encodes every three bytes as four text characters, so the text is about 33% larger. That is fine for small icons and logos, but for large photos a normal file reference is almost always better.
When should I embed an image as a data URI?
Small, rarely changing assets such as icons, logos and tiny textures. Inlining them removes an extra HTTP request. Avoid it for photos and larger images, which bloat HTML or CSS and cannot be cached separately.
Does the preview show the whole Base64 string?
The preview is truncated for very long strings (over roughly 120,000 characters) so the page stays fast. The copy button and the downloaded .txt file always contain the complete string.
Can I encode SVG files?
Yes. SVG images are converted like any other file. For SVG, consider whether inlining the markup directly would be cleaner, since the tool also has an SVG ↔ PNG converter and the Markdown Editor handles code as text.
Why does decoding fail with my text?
Decoding expects a proper data URI or raw Base64 image data. Text that is not Base64, or Base64 that is not an image (for example an encoded PDF), is rejected. Remove surrounding code — for example the url() wrapper from CSS — before pasting.
Related image tools: Image Compressor, Image Converter, Image Resizer.
Encoding and decoding happen in your browser. Neither the image nor the Base64 text is sent anywhere.