First CHTools無料Webツール

FIRST CH TOOLS / 開発 / 17 BASE64 & DATA URI

Base64 Data URI / Data URL 変換（エンコード/デコード）

テキストをBase64へ相互変換し、ドラッグ＆ドロップした画像から data:image/… のData URI・HTMLの <img>・CSSの background-image をそのまま貼れる形で生成します。SVGはパーセントエンコードで小さく出力。URLセーフBase64・76桁改行・デコードにも対応します。

テキスト ⇄ Base64（どちらに入力しても即時変換）

TEXT — UTF-8
BASE64
0
文字数
—
UTF-8バイト数
—
Base64の長さ
—
増加率

日本語はUTF-8のバイト列に直してからBase64にします（多くの文字が1文字3バイト＝Base64では4文字）。URLセーフBase64は + / を - _ に置き換え、パディングの = を落とした形式で、JWTやクエリ文字列で使われます。デコード側はどちらの形式でも、改行や空白が混じっていても、パディングが欠けていても読み取ります。

How to Use

  1. テキストを変換する左のテキスト欄に入力すると右にBase64が出ます。逆に右へBase64やdata URIを貼れば左に元のテキストが戻ります。URLセーフ形式・76桁改行も切り替えられます。
  2. 画像をData URIにする2番目のタブへ画像をドラッグ＆ドロップすると、data:image/… のURIと、そのまま貼れる <img>・CSSの background-image が生成されます。
  3. コピーして貼り付ける各欄のコピーボタンで取得します。Data URIやBase64を元のファイルへ戻したいときは3番目のタブに貼り付けてダウンロードしてください。処理はすべてブラウザ内で完結します。

About This Tool

Base64はバイト列を64種類の文字（A–Z a–z 0–9 + /）だけで表す方式です。3バイトを4文字に置き換えるため、データは必ず約1.33倍に増えます。画像やフォントをHTML・CSSに直接埋め込む data: URI、メール添付（MIME）、JSONやJWTでのバイナリの受け渡しなど、「テキストしか通らない場所にバイナリを通す」ために使われます。暗号化ではないので、機密情報を隠す用途には使えません。

Data URI と Data URL は同じもの（data: で始まるURL）の別の呼び方です。仕様の RFC 2397 の題名は「The "data" URL scheme」で、形は data:[MIMEタイプ][;base64],データ。;base64 を付けると後ろのデータをBase64として読み、付けなければパーセントエンコードした文字列として読みます。本ツールの出力はどちらの呼び方で探していても同じものです。

Data URIでの埋め込みはリクエストが1回減る代わりに、キャッシュとレンダリングで損をします。埋め込んだ画像はHTML/CSS本体と一体になるため単独でキャッシュされず、CSSに入れた場合はその分だけレンダリングを止める時間が伸びます。目安として数KBまでのアイコンや区切り線、あるいはメールHTMLのようにファイル参照が使えない場面に向いています。本ツールは10 KBを超えたときに注意を表示します。

SVGについては、base64よりパーセントエンコードのまま埋め込む方が小さくなります（base64は必ず約1.33倍になるのに対し、SVGの中身はほとんどがそのまま書ける文字のため）。本ツールはSVGを読み込んだときに両方の長さを表示し、既定で小さい方を選びます。出力は & " < > # % と空白・非ASCIIを必ずエスケープするため、HTML属性にもCSSの url("…") にもそのまま貼れます。

デコード側は、標準Base64とURLセーフBase64のどちらでも、改行・空白が混じっていても、末尾の = が欠けていても読み取ります。data URIが名乗るMIMEタイプよりも、実際の中身（マジックナンバー）から判定した種類を優先するため、宣言がずれているコピペでも正しくプレビューできます。

URLにテキストを含めて共有できます: /base64/?text=Hello ／ /base64/?b64=SGVsbG8=

From AI Agents

このエンコード/デコードのロジックは、MCP（Model Context Protocol）サーバー @first-ch/tools-mcp の base64_encode ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。導入方法の詳細は AIエージェントからの使い方 を参照してください。

導入

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

呼び出し例

# テキストをBase64にする
base64_encode(text="こんにちは")

# 画像ファイルをdata URI＋HTML/CSSスニペットにする
base64_encode(path="/path/to/icon.svg", snippets=true)

# Base64 / data URI を元に戻してファイルへ書き出す
base64_encode(
  mode="decode", base64="data:image/png;base64,iVBORw0K…",
  outputPath="/path/to/out.png")

Other Tools