広告が嫌いですか? 行く広告なし今日 

Base64画像プレビュー・デコーダ

データ開発者画像

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

Base64画像プレビュー・デコーダ

Paste a base64-encoded image string and instantly preview the rendered image, with the format auto-detected from the file’s magic bytes. The decoded image, its pixel dimensions, and the decoded byte size are all computed in your browser – no server upload, no waiting on an API. The optional data: URI prefix is stripped automatically, so you can drop in raw base64 from a JSON payload, a CSS background, an email source, or a generated SDK response and it just works.

使用方法

Copy the base64 string. It can be the raw payload, or include the data:image/...;base64, URI prefix – both are accepted.
Paste it into the Base64 文字列 field. The tool decodes and previews the image as soon as you stop typing.
Inspect the detected format, pixel dimensions, decoded byte size, and original base64 character count.
クリック 画像をダウンロード to save the decoded file to your computer with the correct file extension for the detected format.

機能

Auto-detect image format – PNG, JPEG, GIF, WebP, BMP, ICO, SVG, AVIF, and HEIC are recognised from magic bytes, not just the data URI hint.
Pixel dimensions – Width and height are read from the rendered image so you see the true intrinsic size.
Decoded file size – Shows the real binary byte count after decoding, alongside the base64 character length for comparison.
Strips data URI prefix – Works whether the input starts with data:image/png;base64,, just iVBORw0..., or a URL-safe base64 variant.
Download as image file – One click saves the decoded bytes with the correct extension for the detected format.
純粋なクライアントサイド – The base64 string never leaves your browser. Safe to use with private screenshots, internal assets, or sensitive design files.

When to Use This

Reach for this tool whenever you encounter a base64 image string and need to confirm what it actually is – debugging API responses that embed thumbnails, inspecting CSS or HTML emails that inline images, reverse-engineering tracking pixels, sanity-checking output from an image generation API, or recovering an asset from a database export. Because rendering happens in the browser, it’s also a quick way to verify that a base64 payload is well-formed before you ship it into production.

広告削除する？

 よくある質問

What is base64 encoding and why is it used for images?

Base64 is an encoding scheme that represents arbitrary binary data using 64 printable ASCII characters. It exists because many transport channels - JSON, HTML attributes, email bodies, URLs, classic XML - cannot safely carry raw bytes. Encoding an image to base64 makes it possible to embed the entire file as a string in a text-only context, at the cost of about a third more size.
How does a data URI work in HTML and CSS?

A data URI follows the form data:[mediatype][;base64],<payload>. When a browser sees this in an img src, a CSS background-image, or another resource attribute, it does not perform a network request - it decodes the inlined payload and treats it as the resource. This eliminates a round-trip but makes the surrounding HTML or CSS larger and uncacheable on its own.
Why is base64-encoded image data larger than the original binary?

Base64 packs every three bytes of binary data into four ASCII characters, which alone produces a 33% size increase. Padding characters and any line wrapping push that overhead a little higher. As a rough rule, a base64 string is roughly 1.37 times the size of the original file once HTTP-level compression is taken out of the equation.
Which image formats can be encoded with base64?

Any image format can be encoded - base64 is format-agnostic and simply represents the file's bytes. Browsers can render PNG, JPEG, GIF, WebP, BMP, ICO, SVG, and increasingly AVIF and HEIC from a data URI, provided the correct media type is declared in the prefix or detected from the file's magic bytes.
When does inlining a base64 image hurt performance instead of helping?

Inlining is cheap for a tiny image saved on a critical path, but it stops being a win for larger files. A base64 payload cannot be cached separately from the document it is embedded in, blocks streaming of the surrounding markup, and forces the browser to re-parse the same bytes on every page load. For anything above a few kilobytes, a regular <img> request with HTTP caching is almost always faster.