Base64 Image Encoder

Turn an image into a Base64 string, or decode a Base64 string back into an image you can download.

Jump to section

Ad · responsive

How to Use the Base64 Image Encoder

Upload an image to get its Base64 string, or paste a Base64 string to decode it back to an image.

About This Tool

Base64 is a binary-to-text encoding scheme that represents binary data (like images) as a string of printable ASCII characters. It works by splitting binary data into 6-bit groups and mapping each group to one of 64 characters (A–Z, a–z, 0–9, +, /). The resulting string is about 33% larger than the original binary, but it can be safely embedded directly in HTML, CSS, JSON, and XML where raw binary data would break the parser. Common uses include embedding small icons in CSS as data URIs (avoiding extra HTTP requests), sending images in JSON API payloads, and storing thumbnails in databases as text. This tool encodes images to Base64 and decodes Base64 strings back to viewable images, entirely in your browser. Because Base64 inflates size by ~33%, it pairs well with tools that first compress photos for web delivery — the smaller the input, the shorter the data URI.

Frequently Asked Questions

Is the image file I pick transmitted when I encode it to Base64?

No. The file is read via the FileReader API, converted to a Base64 data URI in your browser, and displayed. Nothing is sent to any server at any point. The data URI is generated locally using btoa or the built-in readAsDataURL method — both are client-side APIs with no network component.

Which image types can the Base64 Encoder convert to data URIs?

The Base64 Encoder accepts PNG, JPG/JPEG, WebP, GIF, SVG, and BMP. The resulting data URI includes the correct MIME-type prefix (e.g., data:image/png;base64,...) so you can paste it directly into CSS background-image rules, HTML src attributes, or email HTML templates. SVG files can also be encoded as data:image/svg+xml for inline embedding.

How large an image can I encode to Base64 before performance suffers?

There is no enforced limit, but remember that Base64 encoding inflates binary data by approximately 33%. A 3MB image becomes roughly a 4MB Base64 string. Browsers handle strings up to a few hundred megabytes without issue, but very long data URIs may be impractical to paste into CSS or HTML. For production use, keep encoded images under ~100KB.

Why is the Base64 string larger than the original file?

Base64 represents 6 bits of data per character, while raw binary stores 8 bits per byte. This means 3 bytes of binary become 4 Base64 characters, resulting in a 33% size increase. This overhead is the trade-off for being able to embed binary data in text formats.

When should I use Base64 instead of a separate image file?

Use Base64 for small images (under 10 KB) like icons, logos, and UI elements where eliminating an HTTP request improves performance. For larger images, a separate file is more efficient because browsers can cache it independently and the 33% size overhead becomes significant.

Created by The Toobits Team · Engineering & Editorial

Toobits is built, tested, and maintained by a small independent engineering team. Every tool is written in TypeScript, runs entirely in the browser, and is reviewed against its source formulas before publication.

Editorial policy · Updated April 2026

Ad · responsive