About

Data URIs encode binary image data as base64 ASCII strings following RFC 2397 specification. The format data:[mediatype][;base64],data embeds resources directly in HTML or CSS, eliminating HTTP requests but inflating payload size by approximately 33% due to base64 encoding overhead. This converter decodes the base64 payload, renders to an HTML5 Canvas element, and exports as lossless PNG format. Supported input types include image/jpeg, image/gif, image/webp, image/bmp, and image/svg+xml. Misconfigured Data URIs cause broken images in production deployments. Invalid base64 padding or corrupted character sequences fail silently in browsers, making debugging difficult without proper validation tooling.

Formulas

The base64 encoding algorithm transforms binary data into ASCII characters using a 64-character alphabet. Each group of 3 bytes (24 bits) maps to 4 base64 characters (6 bits each).

encoded_length = 4 × n3

To calculate the original binary size from a base64 string:

decoded_bytes = 3 × len4 − padding

Where len is the base64 string length (excluding header) and padding is the count of trailing = characters (0, 1, or 2). The Data URI format follows RFC 2397 specification:

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data

Canvas export converts all source formats to PNG using lossless DEFLATE compression. The output file size depends on image complexity, not source format.

Reference Data

Source MIME Type	Typical Header	Compression	Alpha Support	Max Colors	Use Case
image/png	`data:image/png;base64,`	Lossless (DEFLATE)	Yes (8-bit)	16.7M (24-bit)	Icons, screenshots, transparency
image/jpeg	`data:image/jpeg;base64,`	Lossy (DCT)	No	16.7M (24-bit)	Photographs, gradients
image/gif	`data:image/gif;base64,`	Lossless (LZW)	Yes (1-bit)	256 (8-bit)	Simple animations, logos
image/webp	`data:image/webp;base64,`	Lossy/Lossless	Yes (8-bit)	16.7M (24-bit)	Web optimization
image/bmp	`data:image/bmp;base64,`	None (raw)	Limited	16.7M (24-bit)	Legacy systems
image/svg+xml	`data:image/svg+xml;base64,`	Text (gzip-able)	Yes	Unlimited (vector)	Scalable graphics
Base64 Encoding Overhead
Original Size	Encoded Size		Overhead Ratio
1 KB	1.37 KB		+37%
10 KB	13.7 KB		+37%
100 KB	137 KB		+37%
1 MB	1.37 MB		+37%
Data URI Length Limits by Context
Context	Maximum Length		Notes
Modern Browsers (Chrome, Firefox, Safari)	~2 GB		Practical limit: available memory
Internet Explorer 8	32 KB		Strict hard limit
CSS `background-image`	No hard limit		Performance degrades >100 KB
HTML `src` attribute	No hard limit		Blocks HTML parsing for large URIs
HTTP GET URL	~2048 chars		Server-dependent

Frequently Asked Questions

PNG uses lossless DEFLATE compression optimized for images with solid colors and sharp edges. A JPEG photograph converted to PNG often increases in size because PNG cannot apply lossy DCT compression. Conversely, a GIF with few colors may shrink when converted to PNG due to superior compression algorithms. The canvas export bypasses original compression entirely, re-encoding pixel data from scratch.

Common causes include: missing or malformed header (must start with 'data:'), incorrect MIME type syntax, absence of ";base64" flag for binary data, line breaks or whitespace within the base64 payload (invalid characters), and truncated strings missing padding "=" characters. The base64 alphabet only permits A-Z, a-z, 0-9, +, /, and = for padding.

SVG Data URIs may use URL encoding (percent-encoded) instead of base64. A valid non-base64 SVG URI looks like: data:image/svg+xml,%3Csvg%20xmlns=... This converter specifically handles base64-encoded images. For URL-encoded SVGs, decode with decodeURIComponent() first, then re-encode to base64 if needed.

Browser memory is the practical limit. This tool validates input size and warns if decoded data exceeds 10 MB. Chrome and Firefox handle Data URIs up to approximately 2 GB, but performance degrades significantly above 5-10 MB. For production use, Data URIs should remain under 100 KB to avoid blocking the main thread during parsing.

No. Conversion to PNG preserves existing pixels without enhancement. JPEG artifacts, compression blocks, and color quantization errors remain permanent. PNG simply prevents further quality loss from additional compression cycles. To improve image quality, return to the original uncompressed source file.

JPEG format does not support alpha channels. If the source Data URI is image/jpeg, transparent regions were already flattened to an opaque color (typically white or black) before encoding. Only PNG, WebP, and GIF sources preserve transparency. The Canvas API composites against a transparent background by default, so true alpha data passes through correctly.