Tools
Image to Base64
Drag in an image and get a ready-to-paste data: URI. Conversion runs locally in your browser — nothing is uploaded.
Drag & drop images here
or
Conversion runs in your browser — nothing is uploaded.
About converting images to base64
This tool converts an image file into a base64-encoded data: URI — a self-contained text representation of the image you can paste directly into an src attribute, a CSS url(), or a JSON payload, with no separate file or extra HTTP request needed. Drop one or more images onto the page, or pick them from a file dialog; each produces a live preview plus a ready-to-paste <img> tag in a text box, with a one-click button that copies just the encoded string on its own.
Encoding happens entirely in your browser through the FileReader.readAsDataURL() API: the file's bytes are read and re-encoded as base64 text locally, and that string is never sent to a server — a deliberate change from the tool's Symfony predecessor, which uploaded the file first. The MIME type in the resulting URI comes from the browser's own detection of the file (file.type) rather than a fixed allow-list, so anything your browser recognizes as an image works: PNG, JPEG, GIF, WebP, SVG, and others.
Reach for this to cut an HTTP request for a small, rarely-changing image — an icon, a logo, a placeholder — by inlining it straight into HTML, CSS, or a JSON config, instead of linking a separate file. The trade-off is size: base64 turns every 3 bytes into 4 characters, so the encoded string runs about 33% larger than the original, and an inlined image can no longer be cached independently of the page around it. Past a few kilobytes, a normal linked file usually serves better.
Examples
<!-- Drop in logo.png (a 1x1 pixel PNG) -- the textarea then contains: -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC" alt="logo.png" />The alt attribute is auto-filled from the file name — replace it with real descriptive text before shipping; logo.png is not useful alt text for a screen reader.
const fs = require('fs');
const base64 = fs.readFileSync('logo.png').toString('base64');
const dataUri = `data:image/png;base64,${base64}`;
console.log(dataUri);
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCCSame bytes, same base64 output, same data: URI as the FileReader-based widget — useful when you want this step in a build script instead of a browser tab.
.logo {
width: 32px;
height: 32px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
}Data URIs work in any CSS property that accepts url(), including background-image, border-image, and @font-face src.
Frequently asked questions
Does this tool upload my images anywhere?
No. Conversion happens entirely in your browser using the FileReader.readAsDataURL() API, and the resulting data: URI is built and shown locally — no image data is sent to a server. The page itself never calls the site's /tools/image-base64-convert endpoint; that one exists separately for scripted use.
Does base64 encoding make an image file bigger?
Yes. Base64 represents every 3 bytes of the original file as 4 text characters, so the encoded string is about 33% larger than the source image — a 30 KB icon becomes roughly 40 KB of text. That's a reasonable trade for a small icon you want to inline, but it adds up quickly for anything larger.
Can I use the output in CSS instead of an HTML img tag?
Yes — copy the value with the Copy data URI button, not the <img> tag text, and drop it into any url(), for example background-image: url("data:image/png;base64,..."). A data URI is just text, so it works in CSS, inline styles, or a JSON config exactly as well as it works in HTML.
Is there a limit on how large an image I can convert?
The in-browser converter has no built-in size limit — it reads files locally, so the practical ceiling is your browser's own memory rather than anything the tool enforces. The separate /tools/image-base64-convert POST endpoint, meant for scripts and curl, caps uploads at 8 MiB.
Why doesn't the Copy data URI button copy the whole img tag?
The text box next to each image already contains the full, ready-to-paste <img src="..." alt="..." /> markup for you to select and copy directly. Copy data URI is a shortcut for the other common case: getting just the bare data:image/...;base64,... string for use somewhere that isn't an <img> tag, like a CSS url().