About This Tool
Convert any image to a Base64 encoded string with this free tool. Drag and drop a PNG, JPG, GIF, SVG, or WebP file and get the full data URI and raw Base64 output instantly. Use the data URI to embed images directly in HTML, CSS, or JSON files without separate image requests. The tool displays your original file size alongside the Base64 string length so you can decide whether embedding makes sense for your use case. Base64 encoding increases the data size by approximately 33%, so small icons and logos are ideal candidates while large photos are better served as regular image files. No images are uploaded to any server, and nothing is stored or shared. Your files stay completely private throughout the process. Copy the output with one click and paste it into your code.
What Is Base64 Encoding?
Base64 is a binary-to-text encoding scheme that converts binary data (like image files) into a string of ASCII characters. It uses 64 printable characters: A-Z, a-z, 0-9, plus (+), and slash (/), with equals (=) for padding. Every 3 bytes of input produce 4 characters of output, which is why Base64 strings are roughly 33% larger than the original data.
The encoding exists because many systems (email, HTML, CSS, JSON) are designed to handle text, not raw binary data. Base64 bridges that gap by representing binary content in a text-safe format that can be embedded directly in code or transmitted through text-based protocols.
When to Use Base64 Images
Embedding images as Base64 is best for small assets that would otherwise require extra HTTP requests:
- Icons and favicons under 5 KB where the overhead of an HTTP request exceeds the image size.
- Email templates where external image loading is blocked by default. Inline Base64 images display without the recipient clicking "load images."
- Single-file HTML documents, reports, or exports that need to be self-contained with no external dependencies.
- CSS backgrounds for small decorative elements like patterns, gradients, or UI sprites.
- JSON APIs that need to include image data inline without separate file hosting.
Avoid Base64 for large images (photos, banners) because the 33% size increase slows page load more than a separate image request would.
Data URI Format Explained
A data URI follows this structure:
data:[mediatype];base64,[encoded data]
For a PNG image, the full URI starts with data:image/png;base64, followed by the encoded string. You can use this directly in HTML image tags, CSS background properties, or any attribute that accepts a URL:
- HTML:
<img src="data:image/png;base64,..." /> - CSS:
background-image: url(data:image/png;base64,...); - Markdown:
The media type tells the browser how to interpret the encoded data. Common types include image/png, image/jpeg, image/gif, image/svg+xml, and image/webp.
Size Comparison and Optimization
Base64 encoding always increases data size. The exact increase depends on the original file:
- Theoretical increase: 33% (3 bytes become 4 characters).
- In HTML context: gzip compression on the server reduces the effective overhead. A gzipped Base64 string is roughly 10-15% larger than the gzipped binary file.
- Practical threshold: Most performance guides suggest Base64 encoding for images under 5-10 KB. Above that size, separate files with caching deliver better performance.
This tool shows both the original file size and the Base64 string length so you can make an informed decision. If the size increase pushes your page above performance budgets, serve the image as a regular file instead.