Image to Base64 Online
Encode an image to a base64 data URL, or paste base64 to decode it back. Runs entirely in your browser.
Drop an image here to convert to base64
PNG · JPEG · GIF · WebP · SVG · multiple files OK
How to convert an image to base64
Drop a PNG, JPEG, GIF, WebP, or SVG into the box above. The base64 string appears below with a Copy button. Toggle the data-URI prefix on or off depending on whether you are pasting into CSS (prefix on) or sending the value in a JSON payload (often prefix off). Need to go the other way? Switch to the Base64 → Image tab.
What base64 is good for
- Inline images in CSS via
background-image: url(data:...) - Email signatures and HTML emails that cannot reference external URLs
- JSON API payloads that need to carry an image attachment
- Embedding small icons directly in source code to skip an HTTP round-trip
- Pasting an image into chat tools that only accept text
What base64 is not for
- Reducing file size — base64 grows the payload by ~33%
- Hiding secrets — it is encoding, not encryption, and trivially reversible
- Large images you serve over HTTP — keep them as binary files for caching
Frequently asked questions
What is base64 encoding for images?
Base64 is a way of representing binary data (like image bytes) using only printable ASCII characters. It is used when you need to embed an image directly in text-only contexts such as CSS files, HTML attributes, JSON API payloads, or email MIME bodies.
How do I convert an image to base64 online?
Drop your image into the box above. The base64 string (and the full data: URL) appears instantly. Click Copy to grab it. Encoding happens entirely in your browser using the FileReader API.
Does ToolChop upload my image to a server?
No. The conversion runs in your browser using the built-in FileReader. Your image never leaves your device — there is no upload, no temporary storage, and no copy on our servers.
What is the difference between a raw base64 string and a data URL?
A data URL has a prefix like data:image/png;base64, before the actual characters. That prefix tells browsers and CSS how to interpret the bytes. A raw base64 string is just the encoded bytes — you need it that way when you store base64 in a database or send it as a JSON value. Use the checkbox to toggle.
Is base64-encoded data smaller than the original image?
No — base64 makes the image about 33% larger because three bytes become four ASCII characters. Use base64 only when you need to embed the image inline (CSS, JSON, email). For network transfer of standalone images, the original binary is always smaller.
Can I decode base64 back into an image?
Yes. Switch to the Base64 → Image tab, paste either a raw base64 string or a full data: URL, and click Decode. The reconstructed image is shown with a Download button.
What image formats are supported?
PNG, JPEG, GIF, WebP, SVG, BMP, and ICO. The data: URL prefix automatically picks the correct MIME type. For decoding, the tool detects the format from magic bytes when no prefix is provided.
How do I use base64 in CSS?
Wrap the data URL in url(), like: background-image: url(data:image/png;base64,iVBOR...). For small icons (under ~10 KB) this avoids an extra HTTP request and can speed up first paint. For larger images, keep them as separate files so they can be cached.
Is base64 a form of encryption?
No. Base64 is encoding, not encryption — anyone can decode it back to the original bytes. Do not use base64 to hide secrets. For true privacy use HTTPS, plus encryption (AES, age, libsodium) on the underlying data.
Why do my base64 strings start with /9j/, iVBOR, or R0lGOD?
Those are the encoded magic bytes for JPEG (FF D8), PNG (89 50 4E 47), and GIF (47 49 46) respectively. You can use those prefixes to tell at a glance what image format a raw base64 string came from.
Is there a file size limit?
Only your browser's memory. We have encoded 50 MB images in modern Chrome without issue, but the resulting base64 string is ~67 MB of text, which can be slow to render in a textarea. For huge files prefer storing the binary directly.
Can I batch convert multiple images?
Yes. Drop multiple files at once — each gets its own copy block with its own data URL. Useful for generating an inline icon set or a JSON manifest of base64-encoded thumbnails.
Why is my decoded image broken?
The most common causes are extra whitespace pasted from a wrapped string, a missing data: prefix when the encoder added one, or truncation when only part of the string was copied. Make sure the string is complete and has no spaces or newlines — the Decode button strips whitespace automatically.