Click or drag & drop images
Any image format — max 10 files
// RESULTS
Upload images or paste Base64
Nothing is uploaded to any server// encode any image to base64 — nothing uploaded
Free browser-based Image to Base64 encoder. Convert any image to a Base64 data URI or raw string for use in CSS, HTML, or JSON. Also decode Base64 back to an image. No sign-up required.
Click or drag & drop images
Any image format — max 10 filesUpload images or paste Base64
Nothing is uploaded to any serverDrag and drop or click to select up to 10 images. Choose your output format and click Encode All.
Click the copy button next to the format you need — Data URI, raw Base64, CSS, HTML, or JSON.
Switch to Base64 → Image mode, paste a Base64 string, and click Decode to preview and download the image.
A free browser-based tool to encode images to Base64 data URIs and decode Base64 strings back to images. Output formats include data URI, raw Base64, CSS background shorthand, HTML img tag, and JSON string value. Batch process up to 10 images — all 100% client-side, nothing is uploaded.
A Base64 data URI is a string that encodes a file's binary content as text, prefixed with its MIME type, so it can be embedded directly in HTML, CSS, or JavaScript. The format is data:[mime];base64,[encoded-data]. For example: data:image/png;base64,iVBORw0KGgo…. Browsers decode and render it exactly as they would an external image file.
Base64 is best for small, frequently-used images like icons, logos, and UI sprites that would otherwise require a separate HTTP request each time. Inlining them eliminates that request latency. For large images (above ~5–10 KB), Base64 is usually counterproductive: the encoded string is ~33% larger than the original, increases your HTML/CSS file size, and prevents browser caching of the image independently.
Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, resulting in a size increase of approximately 33%. A 10 KB PNG becomes about 13.3 KB as a Base64 string. This overhead is acceptable for small images embedded in CSS or HTML, but adds up quickly for larger images. Always compare the trade-off between HTTP request overhead and encoding overhead for your specific use case.
Data URI is the complete string including the data:mime;base64, prefix — use this in an HTML src attribute or CSS url(). Raw Base64 is just the encoded data without the prefix — use this when an API or system requires only the encoded content. CSS background, HTML img tag, and JSON value are ready-to-paste snippets for specific contexts.
No. This tool uses the browser's built-in FileReader API to encode images entirely on your device. No image data, no Base64 output, and no input strings are ever sent to any server. The entire process happens in your browser's JavaScript engine.
Switch to the "Base64 → Image" mode, paste the Base64 string — either a full data URI starting with data:image/ or a raw Base64 string without a prefix. The tool detects both formats automatically. Click Decode to preview the image and download it as a file.
Base64 is a binary-to-text encoding scheme that represents binary data (like an image file) as a sequence of printable ASCII characters. This makes it possible to embed binary content — such as a PNG or JPEG — directly inside text-based formats like HTML, CSS, JSON, or XML without needing a separate file reference or HTTP request.
A Base64-encoded image in a data URI looks like: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…. The browser decodes this string on the fly and renders it identically to an externally loaded image.
The most common use case for Base64 image encoding in web development is embedding small icons and background images directly in a stylesheet. This eliminates the HTTP request overhead for each icon. The CSS background format output from this tool gives you a ready-to-paste snippet: background-image: url("data:image/png;base64,…");. This is particularly effective for SVG icons, small UI decorations, and favicon-sized images that are used on every page load.
Email clients have notoriously poor support for externally loaded images — many block them by default. Embedding images as Base64 data URIs in the email HTML ensures they are always visible without requiring the recipient to click "Load images." Use the HTML img tag output from this tool and paste it directly into your email template. Be aware that very large Base64 strings significantly increase email size and may trigger spam filters.
REST APIs sometimes use Base64 encoding to transmit binary image data in JSON payloads — for example, when uploading a profile photo or returning a dynamically generated chart image. The JSON value output gives you the Base64 string wrapped in double quotes, ready to use as a JSON string value. Conversely, the decoder mode in this tool lets you paste a Base64 string from an API response and immediately preview and download the image.