How to use the Image → Base64 Converter
1. Drop an image file (PNG, JPG, WebP, SVG, GIF) onto the area, or click to browse.
2. The full data URI and raw Base64 string are generated instantly in your browser.
3. Use the data URI directly in HTML/CSS src and background-image, or the raw Base64 for APIs that expect it.
What is it?
Base64 encoding converts binary image data to an ASCII string, allowing images to be embedded directly in HTML, CSS, JSON, and XML without a separate file request. The data URI format is data:[mime];base64,[data], which can be used directly as an img src or CSS background-image value.
Embedded images eliminate an HTTP request but increase file size by ~33%. Best used for small icons, inline SVGs, and email images where file hosting is unavailable.
Benefits
Pass data safely through any protocol
Encoded content — Base64, URL percent-encoding, HTML entities, Unicode escapes — travels through email, JSON, HTTP headers, and databases without corruption.
Decode any encoded string instantly
URL percent-encoding, Base64, HTML entities, Unicode escapes, JWT payloads — decode any format to readable text in one click, no library or script needed.
Copy-paste ready output for any context
Whether embedding content in a URL, HTML attribute, JSON string, or HTTP header — the correct encoding for each destination, immediately.
Eliminate encoding bugs before they reach production
Test encoding and decoding logic interactively with real inputs — catch character encoding mismatches and broken escaping before they cause user-facing errors.
Frequently asked questions
What's the difference between the data URI and raw Base64?
The data URI includes the MIME type prefix (data:image/png;base64,...) and can be used directly in img src or CSS. The raw Base64 is just the encoded bytes, used in APIs or when you need to construct the data URI manually.
Is there a size limit?
No hard limit — but browsers have limits on data URI size in src attributes (typically 1–10 MB). For large images, use a regular URL instead.