FIRST CH TOOLS LOCAL PROCESSING — NOTHING IS UPLOADED 日本語

FIRST CH TOOLS / Dev / 17 BASE64 & DATA URI

Base64 & Data URI Encoder / Decoder

Convert text to and from Base64, and drop an image to get its data:image/… data URI along with ready-to-paste HTML <img> and CSS background-image snippets. SVG is percent-encoded to stay small. URL-safe Base64, 76-column wrapping and decoding are all supported.

Text ⇄ Base64 — type in either box

TEXT — UTF-8
BASE64
0
Characters
—
UTF-8 bytes
—
Base64 length
—
Growth

Text is encoded as UTF-8 bytes first, so non-ASCII characters (most CJK ones are three bytes) become four Base64 characters each. URL-safe Base64 swaps + and / for - and _ and drops the = padding — the form used by JWTs and query strings. The decoder accepts either alphabet, tolerates embedded whitespace and newlines, and does not require the padding to be present.

How to Use

  1. Convert textType into the left box and the Base64 appears on the right; paste Base64 or a data URI on the right and the original text comes back on the left. URL-safe and 76-column forms are one checkbox away.
  2. Turn an image into a data URIOn the second tab, drop an image to get its data:image/… URI plus ready-to-paste <img> and CSS background-image snippets.
  3. Copy and pasteUse the copy button on each box. To turn a data URI or Base64 blob back into a file, paste it on the third tab and download it. Everything runs inside your browser.

About This Tool

Base64 represents arbitrary bytes using only 64 characters (A–Z a–z 0–9 + /). Because every three bytes become four characters, the data always grows by about 33%. It exists so binary can travel through text-only channels: data: URIs that inline images and fonts into HTML and CSS, MIME email attachments, and binary payloads inside JSON or JWTs. It is an encoding, not encryption — it hides nothing.

Inlining as a data URI saves a request but costs you caching and rendering. An inlined image is part of the HTML or CSS, so it cannot be cached on its own, and inside CSS it lengthens the render-blocking download. It pays off for icons and rules of a few KB, or where file references are not available at all, such as HTML email. This tool flags anything over 10 KB.

For SVG, percent-encoding beats Base64: Base64 always inflates by ~33%, while most of an SVG's bytes are characters that can be written literally. This tool shows both lengths whenever you load an SVG and picks the shorter one by default. The output always escapes & " < > # %, whitespace and non-ASCII, so it can be pasted into an HTML attribute or a CSS url("…") unchanged.

The decoder accepts standard and URL-safe Base64, tolerates embedded whitespace and newlines, and does not need the trailing = padding. It trusts the actual bytes (magic numbers) over the MIME type a data URI claims, so a copy-paste with a wrong declaration still previews correctly.

You can share a conversion through the URL: /en/base64/?text=Hello or /en/base64/?b64=SGVsbG8=

From AI Agents

This encoding and decoding logic is also available as the base64_encode tool on the MCP (Model Context Protocol) server @first-ch/tools-mcp, so AI agents can call it directly without driving a browser. See Using these tools from AI agents for setup details.

Install

claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp

Example calls

# Encode text as Base64
base64_encode(text="hello")

# Turn an image file into a data URI + HTML/CSS snippets
base64_encode(path="/path/to/icon.svg", snippets=true)

# Decode Base64 / a data URI back into a file
base64_encode(
  mode="decode", base64="data:image/png;base64,iVBORw0K…",
  outputPath="/path/to/out.png")

Other Tools