Image to Base64 Converter

What you can do here

• PNG to Base64
• JPG / JPEG to Base64
• GIF to Base64 (animated or static)
• WebP to Base64
• SVG to Base64
• BMP to Base64
• AVIF to Base64
• APNG (animated PNG) to Base64
• Base64 to image, with the file type detected
• Copy as CSS, an HTML tag, Markdown or a JSON field

Pick a format button to see notes for that type, or just drop any image — the format is detected from the file. Each format has its own link, such as /image-to-base64?format=jpg.

How image to Base64 conversion works

The browser reads the file's bytes with FileReader.readAsDataURL(). Base64 takes every 3 bytes (24 bits), splits them into four 6-bit groups, and writes each group as one of 64 safe characters (A–Z a–z 0–9 + /), padding the end with =. The result is prefixed with the image's MIME type:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

This is an encoding, not a re-compression: the original bytes come back exactly when decoded. JPEG quality, EXIF metadata, color profiles, GIF and APNG animation frames, timing and loop counts are all kept. The trade-off is size — 4 characters for every 3 bytes, about 33% larger.

Format notes

How much bigger does Base64 make an image?

Image size	Base64 length	Good idea to inline?
1 KB icon	≈ 1,370 characters	Yes — saves a request
10 KB logo	≈ 13,700 characters	Usually fine
100 KB image	≈ 137,000 characters	Rarely — blocks rendering and cannot be cached separately
2 MB photo	≈ 2.8 million characters	No — link the file instead

Using the output

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

.icon { background-image: url("data:image/svg+xml;base64,PHN2Zy..."); }

{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRg..." }

In code

// Browser
const url = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(file); });

# Python
import base64; b64 = base64.b64encode(open("logo.png", "rb").read()).decode()

# Command line (macOS / Linux)
base64 -i logo.png | tr -d '\n'        # macOS
base64 -w 0 logo.png                    # GNU coreutils

Common questions