Base64 Image Converter Pro

Convert images to base64 data URIs — with ready-to-copy CSS/HTML snippets and a real size comparison — and decode base64 back into a downloadable image file.

A premium, zero-dependency image ⇄ base64 workbench. Drop in a PNG, JPG, GIF, WEBP, SVG, BMP or ICO and get a data URI, a raw base64 string, an <img> tag, and a CSS background-image rule, each one click from your clipboard. Paste a data URI or raw base64 back in and download the decoded file — all in your browser, with nothing ever leaving your machine.

Overview

Base64 Image Converter Pro is part of the Web Utility Suite. It runs entirely in the browser with no build step, no frameworks, and no network calls — open index.html from disk and it works. A segmented control switches between Encode (image → base64) and Decode (base64 → image) modes, each with its own drop target, live preview, and clear error states.

Features

• Drag-and-drop or file picker — drop an image onto the zone, click it, or use the explicit Choose file button. Accepts PNG, JPG/JPEG, GIF, WEBP, SVG, BMP and ICO.
• Four independently copyable outputs on encode: the full data URI, the raw base64 string (no data: prefix), an HTML <img> snippet, and a CSS background-image snippet.
• Real size comparison — original (raw) byte size vs. encoded base64 byte size, plus the exact percentage overhead computed from the real numbers (not a hardcoded "~33%").
• Live image preview of whatever was just encoded, over a checkerboard backdrop so transparency is visible.
• Decode mode — paste a raw base64 string or a full data:image/...;base64,... URI. Data URIs are auto-detected; raw base64 lets you pick a MIME type from a dropdown.
• Graceful validation — malformed base64 (bad characters, wrong padding length) and base64 that isn't actually decodable image data are both caught and reported in a clear, non-crashing error panel instead of a blank preview.
• Download decoded images as real binary files — the data URI is decoded with atob + Uint8Array into an actual Blob, not a text file, with an editable filename/extension prefilled from the detected MIME type.
• Keyboard shortcuts for copying the primary output, downloading the decoded image, and opening the shortcuts help modal.
• Auto-persisted UI prefs — your last mode (Encode/Decode) and last chosen MIME type are remembered via localStorage. Image data itself is never persisted.
• Dark & light themes, fully responsive down to 360px, accessible, and keyboard-driven.

Installation

No dependencies, no build step.

git clone https://github.com/kasapdev/base64-image-converter-pro.git
cd base64-image-converter-pro

Then simply open index.html in any modern browser (double-click it, or file:// it). That's it.

Usage

Encode (image → base64)

1. Drag an image onto the drop zone, click the drop zone, or click Choose file.
2. The image previews immediately, alongside its file name, MIME type, raw byte size, encoded byte size, and the exact percentage overhead.
3. Click Copy on any of the four output blocks — Data URI, Raw Base64, HTML snippet, or CSS snippet — to grab exactly what you need.

Decode (base64 → image)

1. Switch to Decode in the segmented control at the top.
2. Paste a full data:image/...;base64,... URI (auto-detected), or paste a raw base64 payload and pick its MIME type from the dropdown.
3. A live preview renders as soon as the input looks like valid, decodable image data; invalid input shows a clear inline error instead of crashing.
4. Adjust the Output filename if you like (it's prefilled from the detected MIME type), then click Download to save a real binary file.

Keyboard Shortcuts

Action	Shortcut
Copy primary output (data URI)	Ctrl/⌘ + C
Download decoded image	Ctrl/⌘ + D
Show shortcuts help	?
Close dialog	Esc

Screenshots

Screenshots coming soon.

Roadmap

• Batch encoding — drop multiple images and export a single sprite sheet of snippets
• Optional client-side image compression/resizing before encoding
• SVG-specific optimizations (whitespace stripping) before base64 encoding
• Drag-and-drop reordering / history of recently encoded images (session-only)
• One-click "copy as JSX src prop" snippet variant

License

MIT Licensed.

---

Part of the kasapdev Tools Suite

One of 45+ zero-dependency vanilla JS tools, all free and open source — see the full list.