Overview
This tool turns image binary data into a Base64 string so you can paste it into HTML, CSS, JSON, emails, or testing fixtures without handling a separate file. It is especially useful when an image must travel as plain text, for example inside a config, a template, or a database field. You can work with common image formats as long as the browser can read the source. The output is plain Base64, and in many cases you can also keep the MIME type prefix to form a usable data URL such as data:image/png;base64,... .
Use cases
- Inline logo in an email headerConvert a small SVG or PNG logo into text so it can live inside a newsletter template without external hosting.
- Store an image inside JSONPrepare a JSON payload that includes a tiny icon or thumbnail as a Base64 string for an API test or local fixture.
- Embed a favicon in a demo pageTurn a compact favicon into a data URL for a standalone prototype where separate asset files are inconvenient.
- Send a preview image through a text-only channelCopy the encoded image into a message, note, or ticket when the receiver needs the exact image data in text form.
How it works
- 1
Upload an image or paste an image data URL.
- 2
The browser reads the file locally.
- 3
The image bytes are encoded into Base64.
- 4
Copy the Base64 string or the data URL and place it where needed.
Examples
PNG logo for HTML
Input: image: 48×48 PNG, dark logo on transparent background
Output: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABX...
Use the full data URL in an img tag or CSS background-image.
JPEG product thumbnail
Input: image: 320×240 JPEG, outdoor product shot
Output: /9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUTEhIVFhUXFxgYGBgYGBcYFxgXFxgYGBgYFxgYHSggGBolGxgXITEhJSkrLi4uGB8zODMtNygtLisBCgoKDg0OGhAQGy0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLv/AABEIAJ8BPgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQADBgcBAv/EADsQAAIBAgQDBgQEBgIDAAAAAAECAwQRAAUSITFBBhMiUWEUMnGBkaGxwdHwFCNS8RQjYnKC0eEV/8QAGgEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EACIRAQEAAgICAQUAAAAAAAAAAAABAhEDIRIxBEFRImETcf/aAAwDAQACEQMRAD8A9z2...
Keep the result as a raw Base64 string when the calling system adds its own MIME prefix.
Small SVG icon for a prototype
Input: image: 24×24 SVG icon exported as image data URL
Output: PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+...
Useful when you need a text-safe version of a tiny monochrome icon.
FAQ
Do I need to keep the MIME type prefix?
Only if you want a complete data URL. If you just need the encoded bytes, copy the Base64 part by itself.
Why does the output look longer than the original file name?
Base64 expands binary data into text, so the string is usually larger than the source image file.
Can I paste any image data URL into the input?
Yes, as long as it is a valid image data URL and your browser can decode the embedded image data.
What happens if the image is very large?
The tool still encodes it, but the resulting text can become unwieldy and hard to embed in code or messages.
Why does my output not start with data:image/... ?
That usually means you copied only the Base64 body. Add the MIME prefix yourself if the target expects a full data URL.