Base64 Image Encoder / Decoder

You’re building an HTML email template and need to embed your company logo without relying on an external image host. Or you’re writing a single-page app that has to work offline, and those small UI icons can’t depend on a CDN. Maybe you just found a mysterious data:image/png;base64,... string in someone’s code and want to see what it actually looks like. This tool handles all of those cases — encoding images to Base64 data URIs and decoding them back — entirely in your browser.

Why This Tool (Not Online Alternatives)

Most Base64 image encoders you’ll find online — base64-image.de, base64encode.org, and similar — upload your file to their server for processing. That means your image passes through infrastructure you don’t control, which is a non-starter if you’re working with internal assets, unreleased designs, or anything under NDA. This tool processes everything client-side using the browser’s FileReader API. Your images never leave your machine.

If you’re comfortable with the command line, base64 image.png (macOS/Linux) or [Convert]::ToBase64String() in PowerShell works fine for one-off conversions. But when you need a live preview, instant data URI formatting with the correct MIME prefix, or the ability to decode an existing data URI to see what’s inside it, a visual tool saves real time. The decode tab alone is worth it when you’re debugging an opaque Base64 string embedded in a JSON config.

What Is a Base64 Image Data URI?

A Base64 image data URI is a way to embed image data directly inside a text-based document such as HTML, CSS, or JSON — without referencing an external file. Instead of linking to logo.png, you embed the full image content as a Base64-encoded string in the format:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

This string consists of three parts:

• data: — the URI scheme indicating inline data
• image/png — the MIME type describing the image format
• ;base64, — separator indicating Base64 encoding follows
• iVBOR... — the actual image bytes encoded as Base64

Why Convert Images to Base64?

There are several practical reasons developers encode images as Base64 data URIs:

Eliminate HTTP requests: Each external image requires a separate HTTP round-trip. For small icons, logos, or decorative images, embedding them as data URIs removes this overhead entirely and avoids FOUC (flash of unstyled content) caused by slow image loads.

Self-contained documents: When generating HTML emails, PDF reports, or offline-capable single-page applications, data URIs ensure images are part of the document and do not depend on a server or file path.

CSS sprites and backgrounds: Small repeating patterns, gradients, or icon sprites are commonly embedded as data URIs in CSS stylesheets, simplifying deployment by keeping everything in a single .css file.

JSON and API payloads: When images must travel inside a JSON body (for example, a user avatar upload, a logo configuration, or a thumbnail cache), Base64 encoding is the standard approach since JSON does not support raw binary data.

Local storage and caching: Browsers can store data URIs in localStorage or IndexedDB, enabling offline-capable web applications that cache images without a service worker.

How to Convert an Image to Base64

Upload tab

Click the drop zone or drag and drop any image file (PNG, JPEG, WebP, GIF, SVG, BMP, AVIF). The tool reads the file using the browser’s FileReader API — no upload to any server occurs. The result appears immediately with:

• A live image preview to confirm the correct file was loaded
• The raw Base64 string for use in scripts and configuration
• The full data URI string ready to paste into src="" or url()
• Image metadata: file name, MIME type, original size, and Base64 size

Toggle Include data URI prefix to switch between the plain Base64 string and the complete data:image/...;base64,... format.

From URL tab

Enter a public image URL and click Fetch. The image is downloaded directly in your browser using the fetch() API and converted to a Base64 data URI without touching any intermediate server.

CORS requirement: The remote server must send an Access-Control-Allow-Origin header that permits your browser to read the response. Most CDNs, GitHub raw content, Imgur, Wikipedia Commons, and public S3 buckets support CORS. If the fetch fails, save the image locally and use the Upload tab.

Decode tab

Paste any data:image/...;base64,... string to instantly preview the embedded image and verify its dimensions, MIME type, and decoded byte size. This is useful when you find an unfamiliar data URI in a codebase or API response and want to confirm it renders correctly before using it.

Supported Image Formats

This tool handles any image format the browser can display. Common supported formats include:

Base64 Size Overhead

Base64 encoding adds approximately 33% size overhead to the original binary data. Every 3 bytes of image data become 4 Base64 characters. For example:

For large images (> 20 KB), the size overhead can increase page weight significantly and may outweigh the benefit of eliminating the HTTP request. A general rule of thumb: use data URIs for images under 5–10 KB. For larger images, serve them as separate files and use HTTP/2 multiplexing or a CDN with aggressive caching.

Using Data URIs in HTML, CSS, and JavaScript

HTML image element:

<img src="data:image/png;base64,iVBOR..." alt="Logo" width="32" height="32" />

CSS background:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB...");
  background-repeat: no-repeat;
  background-size: contain;
}

JavaScript fetch and assign:

const img = document.createElement('img');
img.src = 'data:image/webp;base64,UklGRl...';
document.body.appendChild(img);

JSON configuration:

{
  "logo": "data:image/png;base64,iVBOR...",
  "thumbnail": "data:image/jpeg;base64,/9j/4AAQ..."
}

Privacy and Security

All image processing in this tool happens entirely in your browser:

• Upload tab: The FileReader API reads files locally. The file bytes never leave your device.
• URL tab: Your browser fetches the image directly from the remote server; this tool’s servers are not involved in the transfer.
• Decode tab: The data URI string is parsed and rendered using the browser’s native image decoder.

No image data, Base64 strings, or file names are transmitted to or logged by PureDevTools.

Browser Privacy

All image processing happens in your browser using the FileReader API. Your images never leave your device — no upload, no server-side processing, no logging. When you use the URL fetch tab, your browser downloads the image directly from the source server; PureDevTools acts only as the interface, never as a proxy. This matters if you’re encoding proprietary assets, client logos, or any image you wouldn’t paste into a third-party upload form.

Frequently Asked Questions

How large can a Base64 data URI be? Modern browsers handle data URIs up to several megabytes without issues. However, browsers impose limits: Chrome and Firefox support data URIs up to approximately 2 GB in theory, but practical rendering limits depend on available memory. For web use, keep data URIs under 500 KB to avoid performance issues.

Can I use Base64 images in email HTML? Yes. Base64 data URIs are widely supported by email clients as a way to embed images without relying on external servers. However, some spam filters penalise emails with large inline images, and Base64-encoded images cannot be cached by the email client. For bulk email, consider using external hosted images with absolute URLs instead.

Why does the fetch from URL fail? The most common cause is a missing CORS header on the remote server. The browser’s same-origin policy blocks JavaScript from reading the response body unless the server includes Access-Control-Allow-Origin: * (or your domain) in its response headers. Some servers block this intentionally. In that case, download the image manually and use the Upload tab.

Does Base64 compress images? No. Base64 is an encoding, not a compression algorithm. It makes the data 33% larger, not smaller. If you need to reduce image file size, use image optimisation tools before encoding to Base64.

What is the difference between a data URI and a blob URL? A data URI (data:...) embeds the binary content inline as text. A blob URL (blob:https://...) is a short-lived URL created by the browser pointing to binary data in memory. Data URIs are portable (can be stored in databases, sent in JSON), while blob URLs only exist for the lifetime of the current browser session.