Image to Base64 Encoder Online

Encode any image as a Base64 data URI for HTML, CSS, JSON, or email. All processing happens in the browser — your images never upload.

Drop a file to encode automatically.

Source Image

cloud_upload

Drop an image here, or click to browse

PNG, JPG, WebP, GIF, SVG, BMP, AVIF

Processed locally — never uploaded

Base64 Data URI

data_object

Encoded data URI will appear here.

What is image to Base64 encoding?

An image to Base64 encoder converts a binary image file (PNG, JPG, WebP, GIF, SVG, BMP, AVIF) into an ASCII text string and wraps it as a data: URI — ready to paste into HTML <img src>, CSS background-image, JSON, YAML, or email. Base64 maps every 3 binary bytes to 4 ASCII characters, adding 33% overhead in exchange for the ability to transport images through any text-only channel.

This encoder uses the browser's native FileReader.readAsDataURL(), which produces a complete data URI including the MIME prefix in a single step. All processing happens in the browser — your images never upload. Open DevTools → Network and drop a file: zero requests are made.

How to encode an image as Base64 — 4 steps

Drop an image. Drag any PNG, JPG, WebP, GIF, SVG, BMP, or AVIF into the drop zone, or click to browse.
Encoding happens automatically. The browser reads the file with FileReader and produces a data URI starting with data:image/...;base64,.
Copy what you need. Use Copy Data URI for HTML / CSS, or Copy Raw for JSON / database values without the prefix.
Paste anywhere. Drop into <img> tags, CSS background rules, JSON config, environment variables, or email source.

Sample input and what the tool produces

Input image

File:        favicon.png
MIME:        image/png
Dimensions:  16 × 16
File size:   294 bytes

Output (Base64 data URI)

data:image/png;base64,iVBOR
w0KGgoAAAANSUhEUgAAABAAAAA
QCAYAAAAf8/9hAAAAyklEQVR4n
GP4//8/AzpgI...

Ready Data URI

Output starts with data:image/png;base64, — paste directly into HTML, CSS, or JSON. No prefix wrangling.

Copy Raw or Full

Two copy buttons: full data URI for img/CSS, or raw Base64 for JSON values and database columns.

Browser-Only

FileReader runs in your tab. Logos, screenshots, and confidential mockups stay on your device.

Common use cases

check_circleInlining tiny icons into HTML emails to avoid the "external images blocked" warning
check_circleEmbedding favicons or logos into a single-file HTML report or self-contained dashboard
check_circleIncluding images in JSON API responses where binary attachments are not supported
check_circleStoring avatar images in a database column or in browser localStorage as a single string
check_circleBuilding a CSS sprite alternative — a tiny background image inlined as data URI saves a request
check_circleGenerating data URIs for QR codes returned by an API and rendered without an extra fetch
check_circleProducing self-contained HTML demos that work offline and preview without a server
check_circleEncoding screenshots for inclusion in chat bots, RPA flows, and clipboard automation

Format size comparison: PNG vs JPG vs WebP vs AVIF after Base64

Base64 adds 33% overhead regardless of format, so the source format determines how heavy the encoded string is. The smaller the source file, the smaller the resulting data URI.

Format	Compression	Transparency	Best for	Browser support
PNG	Lossless	Yes (alpha)	Logos, icons, screenshots	Universal
JPG	Lossy (DCT)	No	Photos in HTML email	Universal
WebP	Lossy or lossless	Yes	Modern web (smaller URIs)	Chrome, FF, Safari 14+
AVIF	Lossy (AV1-based)	Yes	Smallest data URIs for photos	Chrome 85+, FF 93+, Safari 16+

Need to do more?

Decode Base64 back to images, or convert between formats — all browser-side.

Base64 to Image PNG to JPG SVG Optimizer

Frequently Asked Questions

What is a Base64 image?

A Base64 image is a binary image file (PNG, JPG, WebP, GIF, SVG, etc.) re-encoded into ASCII text using the Base64 alphabet — 64 printable characters (A–Z, a–z, 0–9, +, /). The encoding lets you transport binary inside text channels: HTML/CSS data: URIs, JSON values, environment variables, YAML config, email bodies. Encoding adds 33% overhead (3 bytes → 4 ASCII chars), but eliminates the need for a separate HTTP request when embedding small images.

Should I inline images as Base64 in HTML or CSS?

For small images (under ~5 KB), yes — inlining saves an HTTP request and avoids a separate cache lookup. Common targets: tiny icons, brand logos in transactional emails, drop-shadow gradients in CSS background-image. For larger images, no — the 33% Base64 overhead plus loss of browser caching across pages makes a regular external <img src> file faster overall. The break-even is roughly 5–10 KB depending on HTTP/2 multiplexing and your CDN.

Is my image uploaded to your servers?

No. Encoding runs entirely in your browser using FileReader.readAsDataURL(), which produces a complete data: URI with the Base64 string already prefixed. The image is read from the local filesystem, encoded in your tab, and never transmitted anywhere. Open DevTools → Network and drop a file: zero requests are made. Logos, screenshots, and confidential mockups stay on your device.

What is the difference between data URI and raw Base64?

A data URI is the full string starting with data:image/png;base64,iVBORw0KGgo... — ready to paste into an HTML img src, CSS background-image, or use as href for a link. The raw Base64 part is just the encoded payload (iVBORw0KGgo...) without the data: prefix or MIME — useful when you put it into a JSON field, environment variable, or database column where the consumer already knows the MIME type. This tool lets you copy either form.

Why is the Base64 string larger than the image file?

Base64 maps every 3 binary bytes to 4 ASCII characters, an overhead of 33%. A 1 KB PNG becomes a ~1.33 KB Base64 string. Add the data:image/png;base64, prefix (24 characters) and the URI is slightly larger still. This overhead is the unavoidable cost of stuffing binary into a text channel; if you compress the resulting HTML/CSS with gzip or brotli the overhead drops below 5% because Base64 is highly compressible.

Can I encode SVG as Base64?

Yes, but for SVG specifically it is often better to URL-encode rather than Base64-encode the SVG XML — URL encoding is more efficient on text data because it only escapes special characters. The result is shorter than Base64 for the same SVG. Use SVG Base64 when you need a guaranteed safe-for-everywhere data URI; use URL-encoded SVG (data:image/svg+xml;utf8,...) for CSS background-image declarations to save bytes. This tool does Base64 for consistency.

How do I decode a Base64 image back?

Use the Base64 to Image decoder linked below. Paste a data URI or raw Base64 string and it renders the image, shows MIME / dimensions / file size, and lets you download. In code: in JavaScript, set img.src = "data:image/png;base64," + b64; in Node.js, Buffer.from(b64, "base64") gives you the raw bytes; on the command line, base64 -d > out.png on macOS / Linux or certutil -decode in.b64 out.png on Windows.