CreaTools LogoCreaTools
Tech Notes
Base64

Base64エンコード/デコードの使い方｜手動変換で事故らないために

2025-12-13

:::note ※Base64エンコーダーの操作方法と、ツール連動の「行動」記事です :::

このツールを作った理由

Base64文字列を手動でコピペしていた。途中で改行が入った。デコードに失敗した。

原因を探すのに3時間かかった。

手動でBase64を扱うと事故る。だからツールを作った。

🚀 今すぐ使う → Base64エンコーダー を開く

できること

テキストやファイルをBase64に変換する。逆に、Base64文字列を元に戻す。

  • 改行・空白は自動除去
  • MIMEタイプは自動検出
  • Data URI形式にも対応

使い方

  1. エンコード or デコードを選ぶ
  2. テキストを入力、またはファイルをアップロード
  3. 結果をコピー

これだけ。

エンコード時のオプション

項目説明私の使い方
RawBase64文字列のみAPIに送るとき
Data URIdata:image/png;base64,... 形式HTMLに埋め込むとき
MIMEタイプPNG/JPEG/SVG/PDFなどファイル形式に合わせる

用途別コピー

変換後、ワンクリックで必要な形式をコピーできる。

ボタン出力形式私の使いどころ
HTML img<img src="data:...">そのまま貼れる
CSS背景background-image: url('data:...')CSSに貼る
JSON"data": "..."APIリクエスト
RawBase64文字列のみ汎用

これが一番便利。手動で整形する必要がない。

サイズ警告

警告意味
50KB以上ページ速度に影響する可能性あり
100KB以上埋め込み非推奨。外部ファイル化を検討

私は10KB以上で外部ファイルを検討する。50KBはかなり大きい。

デコード時の挙動

Data URI形式（data:image/png;base64,...）を貼ると、MIMEタイプを自動認識してBase64部分だけ抽出する。

手動で切り出す必要がない。

私がよく使うパターン

パターン1：アイコンをCSSに埋め込む

  1. SVGファイルをアップロード
  2. 「CSS背景」をクリックしてコピー
  3. CSSに貼り付け

パターン2：APIデバッグ

  1. APIレスポンスのBase64文字列をコピー
  2. デコードして中身を確認

パターン3：メールHTMLの画像

  1. 画像をアップロード
  2. 「HTML img」をクリックしてコピー
  3. メールHTMLに貼り付け

迷ったときの判断

迷い私の判断
エンコードかデコードかやりたいことで決まる
Data URIかRawかHTMLに埋め込むならData URI
サイズ警告が出た10KB以上なら外部ファイルを検討

この記事で解決しない場合

知りたいこと読むべき記事
サイズの目安Base64埋め込みのサイズ目安
エラーが出たBase64でよくあるエラーと対処法
Base64の思想Base64は本来、使うべき技術ではない

手動でBase64を扱うと事故る。ツールを使う。それだけ。