Image to Base64

Turn an image into a Base64 string (data URI) you can embed directly in HTML, CSS, or JSON — no external files needed.

Click here or drop your image

PNG, JPG, WebP, GIF, or SVG — the conversion happens entirely on your device

—Original file

—Base64 string

—Size increase

Full data URI

HTML snippet — <img>

CSS snippet — background

⚠️ Base64 encoding increases file size by roughly 33%: it only pays off for small images (icons, logos, lightweight backgrounds). For large photos, a separate file is the better choice.

🔒 Your image never leaves your browser: nothing is uploaded to a server.

What a data URI is and when to use one

A data URI embeds the image content directly in your code, in the form data:image/png;base64,…. The upside is one less HTTP request: the image arrives together with the page, which is perfect for icons, small logos, favicons, and HTML emails, where external files are often blocked. The downside is that embedded content isn't cached separately by the browser and weighs about a third more than the original file.

Why Base64 is 33% larger

Base64 represents binary data using only 64 plain-text characters: every 3 bytes of the image become 4 characters, hence the roughly 33% overhead. That's why the practical rule of thumb is to only embed files under 5–10 KB; beyond that, the extra weight cancels out the saving from the skipped HTTP request. This tool shows you the exact final size, so you can decide with real numbers in front of you.