Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG · any file type accepted
About Image ↔ Base64
Image to Base64 converts an image file you select (PNG, JPEG, GIF, WebP, SVG, AVIF) into a Base64 data URL — `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…` — and the inverse: paste a data URL or raw Base64 and the tool decodes it back into a previewable image. Conversion is local: the file never leaves your browser.
Reach for it whenever you want to embed a small image directly into a CSS file, an HTML attribute, an email template, a JSON payload, or a JavaScript bundle — anywhere a separate HTTP request for the image would be more trouble than the encoding overhead. The output is roughly 33% larger than the source, so this is appropriate for icons, logos, placeholders, and small thumbnails — not for photographs above a few kilobytes. The plain Base64 tool encodes arbitrary text or binary; this tool is the image-specific helper that adds the right `data:` URL prefix and MIME type automatically.
Examples
(drag a 1KB PNG icon onto the drop zone)data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…Output is a complete data URL ready to drop into `background-image: url(...)` or an `<img src=...>` attribute.
Frequently asked questions
When should I use a data URL versus a normal image URL?
Data URLs avoid an HTTP request, which helps when the image is small and used inline (icons, brand marks, e-mail signatures). For larger images, the 33% size penalty and the lack of caching make a normal `<img src='/path/to/file'>` better.
How is this different from the plain Base64 tool?
Plain Base64 encodes any text or binary into the raw Base64 alphabet. This tool wraps the result in a `data:` URL with the correct MIME type, so the output is directly usable as an image source. It also adds a live preview of the decoded image when you paste a data URL.
Does it handle SVG?
Yes. SVG can also be embedded as plain text inside `data:image/svg+xml;utf8,...` (no Base64), which is shorter and lets you tweak attributes from CSS. The tool offers both encodings; pick utf8 for tweakability, Base64 for guaranteed transport-safety.
What is the maximum file size?
Limited only by your browser's memory. In practice keep data URLs under a few hundred kilobytes — past that, the bundle bloat and parsing cost outweigh the saved request.