Image to Base64 Converter

How to use the Image to Base64 tool

1. Click Upload Image or drag an image onto the upload area. PNG, JPEG, GIF, WebP and SVG all work.
2. A preview appears with the file name and size, and the editor fills with the full data URI (data:image/png;base64,...).
3. Click Copy Base64 to copy the string and paste it into an <img src> or a CSS url().
4. The file is read with the browser's FileReader API in this tab, so nothing leaves your machine. Click Clear to drop the image and start over.

How to convert an image to a Base64 data URI in JavaScript, PHP and Python

const fs = require("node:fs");
const path = require("node:path");

const file = "logo.png";
const mime = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
               ".gif": "image/gif", ".webp": "image/webp", ".svg": "image/svg+xml" }[path.extname(file)];

const base64 = fs.readFileSync(file).toString("base64");
const dataUri = `data:${mime};base64,${base64}`;
console.log(dataUri.slice(0, 60) + "...");

// In the browser, use FileReader on a File from an <input type="file">:
// const reader = new FileReader();
// reader.onload = () => console.log(reader.result); // full data URI
// reader.readAsDataURL(file);

<?php
$file = 'logo.png';
$mime = mime_content_type($file);           // image/png
$base64 = base64_encode(file_get_contents($file));
$dataUri = "data:$mime;base64,$base64";

echo substr($dataUri, 0, 60), "...", PHP_EOL;
// Use it directly in markup:
// echo '<img src="' . $dataUri . '" alt="Logo">';

import base64
import mimetypes

file = "logo.png"
mime = mimetypes.guess_type(file)[0] or "application/octet-stream"

with open(file, "rb") as f:
    b64 = base64.b64encode(f.read()).decode("ascii")

data_uri = f"data:{mime};base64,{b64}"
print(data_uri[:60] + "...")

Common errors and how to fix them

The image does not show and the URL bar shows data:image/png;base64,data:image...

The prefix was added twice. The tool already outputs a full data URI, so paste it as-is into src, without typing the prefix again.

Selector or declaration is too long in a CSS linter, or the stylesheet editor freezes

Large images produce data URIs of hundreds of kilobytes on one line. Inline only small icons; keep photos and large graphics as separate files.

SVG shows in the tool but is blank in the page

The SVG probably lacks width and height or a viewBox, so it renders at 0 size. Add a viewBox attribute to the root element before converting.

Page total size doubled after inlining images

Base64 adds 33 percent, and inlined images are not cached separately from the HTML or CSS. Every page load re-downloads them, so measure before inlining.

Good to know