Image ⇄ Base64 converter
Convert an image into a Base64 data URI to inline in HTML or CSS, or decode a Base64 string back into a downloadable image. Fast, free, and private — all in your browser.
Drop images here or click to browse
JPG · PNG · WebP · GIF · BMP · AVIF — processed locally, never uploaded
About Base64 images
Encoding an image as Base64 turns its binary data into plain text you can embed directly in a stylesheet or HTML document as a data URI. This removes a network request, which can speed up loading for tiny assets like icons.
The trade-off: Base64 text is about 33% larger than the original file and can't be cached separately, so reserve it for small images. For photos, keep them as regular files and compress them instead. Curious how formats compare? Read JPEG vs PNG vs WebP.
Frequently asked questions
What is a data URI?
A data URI embeds the file's bytes directly in the URL as Base64 text, so an image can live inside your HTML or CSS with no separate file request.
When should I inline images as Base64?
For very small images — icons, tiny logos, 1px backgrounds — to save an HTTP request. Base64 is ~33% larger than the binary, so it's a bad idea for large images.
Is anything uploaded?
No. Encoding and decoding happen entirely in your browser.
How this tool helps
Small images sometimes need to be embedded directly in HTML, CSS, JSON, or an API payload. Use Base64 for small icons, prototypes, and self-contained snippets; use normal image URLs for larger production assets.
How to use it
- Add an image or paste a data URI.
- Choose encode or decode.
- Copy the result or download the decoded image.
Example
Convert a small SVG or PNG icon into a data URI for a CSS background declaration.
What you get
Encoding returns a MIME-prefixed data URI; decoding returns an image file that can be downloaded.
Good to know
Limitations: Base64 increases payload size and can make HTML or CSS harder to cache. Validate untrusted strings before using them in an application.
Privacy: Encoding and decoding happen on-device in the browser.
How PixelTools makes this decision
PixelTools shows the settings and the result side by side so you can make an informed choice before downloading. File size is measured from the actual browser-generated output, while dimensions, format, and visual preview are kept visible because a smaller file is not automatically a better file. The original is never overwritten.
These tools are maintained as practical, browser-first utilities rather than upload forms. We document the trade-offs for each task, test the output in the browser, and link to related guides when a different format or workflow may be a better fit. For troubleshooting, see Help & Support; for the full data-handling explanation, read the Privacy Policy.