Featured Developer Sponsor • Zero-Token Protection
RFC 4648 Decoders
MIME Magic Sniffer
Data URI Studio
Zero Network Uploads
Base64 to Image Decoder & Data URI Viewer
Convert Base64 strings, Data URIs, and embedded CSS background tokens into viewable images. Inspect binary magic byte headers, verify dimensions and color depth, preview alpha transparency with checkerboard grids, and download clean image files.
Load Sample Payload:
0 characters
BG:
🖼️
Paste a Base64 string or Data URI to preview image
Ready
Zoom:
Binary Telemetry & Payload Analytics
DETECTED MIME
None
MAGIC SIGNATURE
--
RESOLUTION
--
ASPECT RATIO
--
DECODED BINARY
0 B
BASE64 PAYLOAD
0 B
RADIX OVERHEAD
+33.3%
📐 Mathematical Foundations of Radix-64 Transcoding & Magic Signatures
Base64 maps binary data onto a 64-character subset of ASCII (A–Z, a–z, 0–9, +, and /). Because each character represents exactly 6 bits ((2^6 = 64)), transcoding transforms 3 contiguous 8-bit bytes (24 bits) into 4 contiguous 6-bit sextets:
3 Octets (24 bits): [01001000] [01101001] [00100001] ("Hi!")
4 Sextets (24 bits): [010010] [000110] [100100] [100001]
Base64 Alphabet: S G k h -> "SGto"
Decoded Byte Size Formula: The exact decoded binary size in bytes is determined from the sanitized Base64 character length (L) and the number of terminal padding characters (P in {0, 1, 2}):
$$ ext{Size}_{ ext{bytes}} = leftlfloor rac{3 imes L}{4}
ight
floor - P$$
Because (4/3 = 1.3333), encoding a file to Base64 introduces an unavoidable 33.33% payload expansion penalty, making Base64 inefficient for storing multi-megabyte assets in web databases or JSON APIs.
⚠️ 5 Fatal Traps of Base64 Image Decoding & Web Inlining
1. Stored XSS via Malicious SVG Data URIs
SVG is an XML vector document capable of embedding
<script> tags and inline JavaScript event handlers (onload, onerror). If your backend decodes user-supplied Base64 SVGs and displays them in the DOM via innerHTML or direct navigation without sanitization via DOMPurify, attackers achieve full stored Cross-Site Scripting (XSS).
2. V8 / SpiderMonkey String Heap Fragmentation on Huge Strings
Pasting multi-megabyte (10MB+) Base64 strings into browser textareas or storing them in JavaScript variables causes severe V8 heap fragmentation. Creating a single contiguous 20MB string requires large linear memory blocks that can trigger garbage collection pauses, tab freezing, or out-of-memory crashes on mobile devices.
3. Browser URL Bar and Attribute Truncation Limits
While modern desktop browsers support 2MB to 32MB Data URIs in
src attributes, older webviews, email clients, and proxy servers enforce strict length limits (e.g. Internet Explorer 32KB ceiling, Outlook blocking Data URIs entirely). Navigating the browser address bar to a large Data URI will crash or truncate the URL.
4. Malformed Padding & URL-Safe Base64 Mismatches
RFC 4648 Section 5 defines URL-safe Base64 which replaces
+ with - and / with _, often stripping trailing = padding. Passing URL-safe Base64 directly into JavaScript atob() throws an uncaught InvalidCharacterError DOMException. Normalization must convert characters back to standard Base64 before decoding.
5. Cache Annihilation & HTTP/2 Multiplexing Defeat
Inlining large Base64 images directly into HTML documents or CSS stylesheets prevents browsers from caching image files independently. Every time the page or stylesheet changes, the entire multi-megabyte image payload must be re-downloaded over the network, defeating HTTP/2 and HTTP/3 multiplexed parallel downloads.
Frequently Asked Questions
How does this tool detect the image format from a raw Base64 string?
The tool decodes the leading characters into a raw binary Uint8Array and inspects the standardized magic number signatures. For instance, PNG files begin with
0x89 0x50 0x4E 0x47, JPEG with 0xFF 0xD8 0xFF, GIF with 0x47 0x49 0x46 0x38, and WebP with 0x52 0x49 0x46 0x46. This detects true file types even if the user pasted raw Base64 without any data: URI prefix.
Why is a Base64 string approximately 33.3% larger than the binary image file?
Binary image files use all 8 bits of every byte (256 states). Base64 maps data into a 64-character ASCII safe subset using 6 bits per character (2^6 = 64). Representing 3 binary bytes (24 bits) requires 4 Base64 characters (24 bits), creating an exact 4/3 or +33.33% storage volume penalty before MIME headers.
Is it safe to decode and render user-provided Base64 SVG images?
When an SVG is rendered using an HTML
<img> tag, Canvas drawImage(), or CSS background-image, modern web browsers automatically isolate the image in a sandboxed security context where inline scripts and event handlers (such as onload or onerror) are disabled. However, directly inlining SVG text into DOM innerHTML without sanitization creates high-risk Stored Cross-Site Scripting (XSS).
How do I decode Base64 back to an image file in Node.js or Python?
In Node.js:
In Python:
Both methods reconstruct identical byte-for-byte binary files on disk.
fs.writeFileSync('image.png', Buffer.from(base64Str, 'base64')).In Python:
import base64; open('image.png', 'wb').write(base64.b64decode(base64_str)).Both methods reconstruct identical byte-for-byte binary files on disk.
Does decoding a Base64 string introduce compression artifacts or quality loss?
No. Base64 is a 100% mathematically lossless binary-to-text radix transcode. It preserves every single bit of the original file structure without re-sampling, color reduction, or lossy artifact generation.
Related Developer & Converter Utilities
Image to Base64 Converter
Encode PNG, JPEG, SVG, and WebP into Base64 Data URIs.
Base64 Text & Binary Encoder
Encode and decode text and binary files with UTF-8 support.
CSV to JSON Converter
RFC 4180 tokenizer with real-time tabular preview.
URL Parser & Query Inspector
Inspect URL protocol, hostname, paths, and query params.
Sponsored Utility
While You're Here
Sponsored Recommendations
Advertisement