User Rating 0.0 ★★★★★

Total Usage 0 times

Category Image Converters

Drop a .txt file here or click to upload

Base64 String With or without data:image/png;base64, prefix. Whitespace is ignored.

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

A Base64-encoded PNG string inflates the original binary by roughly 33% due to the 6-bit-to-8-bit encoding ratio. Passing a malformed string to a naive decoder produces a silent blank image or a broken src attribute that is impossible to debug without inspecting the raw bytes. This tool validates the input against the PNG magic signature (89 50 4E 47 0D 0A 1A 0A) before rendering, parses the IHDR chunk for width, height, bit depth, and color type, and reports the decoded file size in bytes. It operates entirely in-browser with zero server round-trips.

Limitation: the tool decodes standard Base64 (RFC 4648). Base64url variants using - and _ instead of + and / are auto-converted, but non-PNG payloads (JPEG, GIF, WebP) will be rejected at the signature check. Maximum practical input size depends on browser memory - strings above 50MB may cause tab crashes on mobile devices.

Formulas

The decoded byte size S from a Base64 string of length L with p padding characters is computed as:

S = 34 × L − p

Where S = decoded size in bytes, L = length of Base64 string (excluding whitespace and data URI prefix), p = number of trailing = padding characters (0, 1, or 2).

PNG signature validation checks the first 8 decoded bytes against the constant sequence:

PNG_sig = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]

Image dimensions are extracted from the IHDR chunk via big-endian 32-bit unsigned integer reads:

width = uint32BE(bytes, 16) height = uint32BE(bytes, 20)

Where uint32BE reads four consecutive bytes as a big-endian unsigned 32-bit integer: b₀ × 2²⁴ + b₁ × 2¹⁶ + b₂ × 2⁸ + b₃.

Reference Data

Property	IHDR Offset	Size	Description
Signature	Byte 0 - 7	8 bytes	PNG magic number: 89 50 4E 47 0D 0A 1A 0A
IHDR Length	Byte 8 - 11	4 bytes	Always 13 (0x0000000D)
IHDR Type	Byte 12 - 15	4 bytes	Chunk type: 49 48 44 52 ("IHDR")
Width	Byte 16 - 19	4 bytes	Image width in pixels (big-endian uint32)
Height	Byte 20 - 23	4 bytes	Image height in pixels (big-endian uint32)
Bit Depth	Byte 24	1 byte	Bits per sample: 1, 2, 4, 8, or 16
Color Type	Byte 25	1 byte	0=Grayscale, 2=RGB, 3=Indexed, 4=Gray+Alpha, 6=RGBA
Compression	Byte 26	1 byte	Always 0 (deflate/inflate)
Filter Method	Byte 27	1 byte	Always 0 (adaptive filtering)
Interlace	Byte 28	1 byte	0=None, 1=Adam7
Base64 Ratio	-	-	Encoded size ÷ decoded size ≈ 1.333
Padding	-	-	0 - 2 = chars appended to make length divisible by 4
Data URI Prefix	-	-	`data:image/png;base64,`
Max Channels (RGBA)	-	-	4 channels × bit depth per pixel
CRC-32	Byte 29 - 32	4 bytes	Checksum over IHDR type + data
Alphabet (Standard)	-	-	`A-Z a-z 0-9 + / =` (64 symbols + pad)
Alphabet (URL-safe)	-	-	`A-Z a-z 0-9 - _` (no padding)

Frequently Asked Questions

The decoder checks the first 8 decoded bytes against the PNG magic signature (89 50 4E 47 0D 0A 1A 0A). If the signature does not match - for example, a JPEG starts with FF D8 FF - the tool rejects the input with a specific error message identifying the detected format. No image is rendered.

No. The tool auto-detects and strips any Data URI prefix matching the pattern data:[mimetype];base64,. You can paste either the raw Base64 string or the full Data URI. Both are handled identically.

Base64 encodes every 3 bytes of binary data into 4 ASCII characters, producing a 33% size overhead. A Base64 string of length L (ignoring padding) represents approximately L × 3 ÷ 4 bytes of actual data. For example, a 1,000-character Base64 string decodes to approximately 750 bytes.

Yes. Base64url replaces + with - and / with _ and omits padding. The decoder automatically converts these characters back to standard Base64 before decoding. No manual conversion is required.

Bit depth indicates bits per sample per channel: 1, 2, 4, 8, or 16. Color type defines the channel structure: 0 = Grayscale (1 channel), 2 = RGB (3 channels), 3 = Indexed-color (palette), 4 = Grayscale + Alpha (2 channels), 6 = RGBA (4 channels). A color type 6 image with bit depth 8 uses 32 bits per pixel.

There is no artificial limit. The practical ceiling is browser memory. The atob() function and Canvas rendering handle strings up to approximately 50-100 MB on desktop browsers. Mobile devices with limited RAM may fail on strings above 10-20 MB. The tool catches out-of-memory errors and reports them gracefully.

Adam7 interlacing stores the image in 7 progressive passes, allowing incremental rendering. The decoded PNG file retains its interlacing flag. The browser renders the full image regardless - interlacing only affects progressive loading behavior. The tool reports whether interlacing is enabled (value 0 = none, 1 = Adam7) in the metadata panel.