Why is the Base64 bigger than my image?

Base64 uses 4 characters for every 3 bytes, so encoded data is about 33% larger than the file.

Should I inline all my images?

No. Inlined images can't be cached separately and make your HTML or CSS heavier. Use data URIs for small, frequently used images only.

What's the difference between Base64 and a data URI?

A data URI is Base64 with a prefix that names the type, like data:image/png;base64,…. Browsers need the prefix; many APIs want only the Base64 part.

Image to Base64

Encode an image as a Base64 string or data URI, ready for CSS, HTML or JSON.

Processed locally

Drop a file here

PNG, JPG, GIF, WebP, SVG · up to 10.00 MB · or paste

Choose file

Stays on your device

Instructions

How to use it

01Drop an image, choose a file, or paste from your clipboard.
02Pick the output: data URI, raw Base64, <img> tag or CSS.
03Copy it, or download it as a .txt file.

About

What it does

A data URI puts an image directly inside your HTML, CSS or JSON as text, so it loads without a separate file request. It's handy for small icons, email templates, single-file demos and APIs that expect images as Base64 strings.

Drop an image and get the encoded result in four ready-to-paste forms: a full data URI, plain Base64, an HTML <img> tag or a CSS background-image rule. The real file type is detected from its contents, not its name.

Supported formats

PNG, JPG, GIF, WebP, SVG, BMP, AVIF: Up to 10 MB, though data URIs are best kept under about 100 KB.

Good for

Inlining small icons in CSS to save HTTP requests
Embedding images in HTML email templates
Sending an image to an API that expects Base64
Creating single-file HTML demos

Questions, answered

Why is the Base64 bigger than my image?: Base64 uses 4 characters for every 3 bytes, so encoded data is about 33% larger than the file.
Should I inline all my images?: No. Inlined images can't be cached separately and make your HTML or CSS heavier. Use data URIs for small, frequently used images only.
What's the difference between Base64 and a data URI?: A data URI is Base64 with a prefix that names the type, like data:image/png;base64,…. Browsers need the prefix; many APIs want only the Base64 part.

All image tools (6)