Image to Data URL Converter
Drop an image (or any small file) and it becomes a data: URL — the file's bytes encoded to Base64 with a MIME prefix, ready to paste into an <img> tag or a CSS background. The live preview renders the result so you can verify it visually before copying. The file is read with FileReader inside your browser; nothing is uploaded.
runs 100% in your browser — text & files never uploaded
- 1Pick mode & directionText Mode for strings, File Mode for images and small files; encode or decode.
- 2Paste or dropConversion runs on every keystroke — UTF-8, URL-safe Base64, and data: URLs all handled.
- 3Copy or previewGrab the result with one click; decoded images render live in the preview sandbox.
drag & drop an image or small file hereor browse — max 2 MB
live preview sandbox
Encoded and decoded with your browser’s native btoa/atoband FileReader — text and files never leave this tab.
How to embed the result
<!-- HTML: paste the data URL straight into src -->
<img src="data:image/png;base64,iVBORw0K..." alt="logo" />
/* CSS: or embed it as a background image */
.logo {
background-image: url("data:image/png;base64,iVBORw0K...");
}Rule of thumb: data URLs shine for small assets (icons, logos under ~10 KB) where saving an HTTP request beats the ~33% Base64 size overhead — for bigger images, a normal file is usually the better call.