Blog · How-To
PNG to Base64: How to Convert Images to Base64
Convert PNG images to Base64 for embedding in HTML, CSS, and JSON. Methods for browser, JavaScript, Python, and command line.
Converting a PNG to Base64 lets you embed the image directly in your HTML or CSS as a data URI. No separate file, no extra HTTP request. This is useful for small icons, email signatures, and single-file HTML documents.
Method 1: Use Our Online Tool
Drag and drop any PNG onto base64go.com. The tool reads the file and outputs the Base64 string instantly. Copy it and use it as data:image/png;base64,... in your HTML.
Method 2: JavaScript (Browser)
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
Method 3: Python
with open("image.png", "rb") as img:
b64 = base64.b64encode(img.read()).decode()
# Use in HTML
src = f"data:image/png;base64,{b64}"
Base64 to PNG (Reverse)
To convert Base64 back to a PNG file, strip the data URI prefix and decode:
b64_str = "iVBORw0KGgo..."
img_data = base64.b64decode(b64_str)
with open("output.png", "wb") as f:
f.write(img_data)
When Not to Base64 Encode Images
Base64 encoding increases file size by about 33%. For large images, this hurts page load time. Use Base64 for small assets (icons under 5KB, email signatures, inline SVGs). For larger images, serve them as regular files with proper caching headers.