Image to Base64 Converter

The most common mix-up is the prefix. Browsers need data:image/…;base64, in front, while most APIs want raw Base64 and reject the prefix. Some APIs ask for the image type in a separate field, such as "media_type": "image/png".

KB and MB here are 1,024 and 1,048,576 bytes. Add the prefix length (22 characters for PNG) for a data URI. If the Base64 is too long for where it has to go, shrink or compress the image first: re-encoding the same file never makes it shorter.

JavaScript: a file the user picks (gives a data URI)

const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // data:image/png;base64,iVBORw0KGgo…
reader.readAsDataURL(file);

JavaScript: an image URL

const blob = await (await fetch('https://example.com/logo.png')).blob();
const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsDataURL(blob);

Fetching an image from another site only works if that site allows it (CORS). If it fails, download the image and use the tool above.

Node.js (gives raw Base64)

const fs = require('fs');
const base64 = fs.readFileSync('logo.png').toString('base64');

Python

import base64, mimetypes

with open('photo.jpg', 'rb') as f:   # 'rb': read as bytes, not text
    b64 = base64.b64encode(f.read()).decode('ascii')

data_uri = f"data:{mimetypes.guess_type('photo.jpg')[0]};base64,{b64}"

PHP

$b64 = base64_encode(file_get_contents('logo.png'));
$dataUri = 'data:' . mime_content_type('logo.png') . ';base64,' . $b64;

Command line

base64 -w 0 logo.png > logo.txt          # Linux (-w 0 = one line)
base64 -i logo.png -o logo.txt            # macOS
[Convert]::ToBase64String([IO.File]::ReadAllBytes("C:\images\logo.png")) | Set-Content logo.txt   # Windows PowerShell

The usual mistake is reading the image as text (Python's 'r' instead of 'rb'), which damages the bytes. Windows' certutil -encode also works, but it adds BEGIN/END lines and line breaks that you must remove before using the result in HTML.

base64 -d logo.txt > logo.png                           # Linux / macOS
open('logo.png', 'wb').write(base64.b64decode(b64))     # Python

• MDN: data: URLs: how data URIs are written and where browsers accept them.
• MDN: Base64: why Base64 makes data about a third larger.
• MDN: FileReader.readAsDataURL(): the browser method in the JavaScript examples.
• Can I email: Base64 images: which mail apps show Base64 images.
• Can I use: HEIF/HEIC: which browsers can display HEIC images.