About

Data URIs allow image data to be embedded directly into HTML or CSS as Base64 encoded strings. While efficient for small icons to reduce HTTP requests, these strings are unreadable to humans. This tool decodes the string back into a visual format, allowing developers to verify API responses or extract assets from legacy code.

The decoder handles raw Base64 strings as well as those with MIME-type headers (e.g., data:image/png;base64,...). It operates entirely within the browser memory, ensuring that sensitive image data (such as user-uploaded documents or private assets) is never transmitted to a third-party server.

Formulas

Base64 encoding expands file size by approximately 33% compared to the original binary.

Sizebase64 ≈ 4 × Sizeoriginal3

Every 3 bytes of binary data are encoded into 4 ASCII characters. Padding characters (=) are added to the end if the total byte count is not divisible by 3.

Reference Data

MIME Type	Magic Number (Hex)	Base64 Header	Usage
image/png	89 50 4E 47	/9j/	Lossless, Web UI
image/jpeg	FF D8 FF	iVBORw0KGgo	Photos, Large backgrounds
image/gif	47 49 46 38	R0lGODlh	Animations
image/webp	52 49 46 46	UklGR	Modern Web Compression
image/svg+xml	3C 3F 78 6D	PHN2Zy	Vector Graphics
image/bmp	42 4D	Qk0=	Legacy Windows

Frequently Asked Questions

The tool attempts to detect the image format by analyzing the first few characters (Magic Numbers) of the decoded binary. If detected, it automatically appends the correct data URI header.

Common causes include: copy-paste errors (missing characters), URL-encoded characters (like %2B instead of +), or whitespace. This tool includes a "Sanitize" function to strip whitespace before decoding.

Technically, the limit is defined by the browser's maximum string length and available memory. Modern browsers can handle Base64 strings up to several megabytes, but UI performance may degrade with strings larger than 10MB.