Understanding data:image/png;base64: the wrapper and the bytes

data:image/png;base64, is a prefix, not a complete image. It introduces an inline resource: the scheme is data, the declared media type is image/png, and the marker says that the following payload uses Base64. The comma is the boundary between metadata and data.

Read the structure

data:[media-type][;base64],payload

data:text/plain;base64,SGVsbG8=
data:text/plain,Hello%20world

The first example represents the text Hello through Base64. The second uses percent encoding instead. A Data URI parser must inspect the metadata before choosing a decoder. Sending the full URI to a raw Base64 decoder fails because the colon, semicolon and comma are not payload characters.

Split at the first comma, not every comma. The remaining data may itself contain commas, especially in a non-Base64 text URI. Optional media-type parameters can appear before the Base64 marker. When the media type is omitted, the data URL format has a default text type and charset; that default does not transform arbitrary binary bytes into readable text.

A MIME label is a claim

Anyone can place image/png in the prefix. The label does not prove that the bytes form a PNG. Compare the signature, then ask an actual image decoder to load the result. Similarly, a PDF header is only a recognition clue; a complete PDF parser may still reject the document.

Changing image/png to image/jpeg does not convert the image. Conversion means decoding the source image and encoding a new file in the destination format. This may change transparency, metadata, quality and size. Keep the original when those differences matter.

Recover the resource without executing it

Parse and inspect first. Text can be shown as text, while supported raster images can be previewed in an image element. Avoid inserting arbitrary HTML or SVG markup into the document. A data URL can represent active content as well as a picture, so its self-contained nature is not a safety guarantee.

For a file download, preserve the decoded bytes and use a sensible extension based on confirmed format information. For a diagnostic report, display declared type and detected type separately. This makes mismatches visible instead of hiding them behind a reassuring file icon. Data URL syntax and its defaults are described in MDN: data URLs.