Webの開発をしていると「Base64エンコード」という文字列に出会う場面が少なくありません。HTTPの認証ヘッダー、メール添付ファイルのエンコード、JSONに画像データを埋め込むData URL、APIトークンの一部。これらはすべてBase64を利用しています。

Base64を都度変換するために毎回コードを書くのは手間です。Base64変換ならブラウザ上でテキストをエンコード・デコードできます。登録不要・無料で、入力データがサーバーに送信されることもありません。

この記事ではBase64の仕組みを説明したうえで、ツールの使い方と実際の開発現場での活用例を紹介します。

目次

• Base64エンコードとは
  • なぜ必要か
  • 仕組み
• ブラウザでBase64変換する方法
  • エンコード（テキスト → Base64）
  • デコード（Base64 → テキスト）
• 活用例1：HTTP Basic認証ヘッダーの確認
• 活用例2：Data URLとしての画像埋め込み
• 活用例3：URL-safeモードの使い方
• まとめ

Base64エンコードとは

Base64は、バイナリデータ（画像・動画・任意のバイト列）をASCII文字だけで表現するためのエンコーディング方式です。

なぜ必要か

電子メールやHTTPヘッダーなど、歴史的にASCIIテキストのみ扱うことを前提に設計されたプロトコルがあります。こうしたプロトコルでバイナリデータを安全に伝送するために、Base64でテキスト形式に変換する手法が使われます。MDN Web Docs「Base64」でも同様の説明が記載されています。

仕組み

Base64は3バイト（24ビット）を4文字（各6ビット）に変換します。使用する文字は次の64種類です。

• A〜Z（26文字）
• a〜z（26文字）
• 0〜9（10文字）
• ”+“と”/“（2文字）
• ”=“（パディング文字）

3バイトが4文字に変換されるため、データ量は元の約4/3倍（約33%増）になります。

たとえば “Man” という3文字（ASCII: 77, 97, 110）をBase64でエンコードすると “TWFu” になります。24ビットを6ビットずつ4つに分割し、それぞれを上記の文字に対応させた結果です。

テキストの長さが3の倍数でない場合は ”=” でパディングします。2文字余りなら末尾に ”=” を1つ、1文字余りなら ”==” を2つ付けます。

ブラウザでBase64変換する方法

Base64変換ツールを使った手順を説明します。

エンコード（テキスト → Base64）

1. ツールを開きます
2. 左側の入力欄にエンコードしたいテキストを入力します
3. 右側にBase64文字列が即座に表示されます

日本語・絵文字を含む任意のUnicode文字に対応しています。内部でUTF-8でバイト列に変換したうえでBase64エンコードを行うため、“あ”（UTF-8: 0xE3 0x81 0x82）も正しく変換されます。

変換後には元のバイト数とBase64後のバイト数が両方表示されます。「元データ3バイト → Base64で4文字」という比率どおりにサイズが増加していることを実際の数値で確認できます。

デコード（Base64 → テキスト）

1. ツールを開きます
2. 右側（Base64）入力欄に変換したいBase64文字列を貼り付けます
3. 左側に元テキストが表示されます

デコードに失敗する場合、Base64の形式が正しくない（パディングの”=“が不足している等）か、URL-safeモードの切り替えが必要なケースが考えられます。

活用例1：HTTP Basic認証ヘッダーの確認

HTTP Basic認証では、“ユーザー名:パスワード” の形式の文字列をBase64エンコードしてAuthorizationヘッダーに含めます。

Authorization: Basic dXNlcjpwYXNzd29yZA==

この “dXNlcjpwYXNzd29yZA==” が “user:password” をBase64エンコードした値です。

開発中に認証ヘッダーの中身を確認したいとき、このBase64部分をツールにペーストしてデコードすれば元の文字列が一目でわかります。逆に、デバッグ用の認証ヘッダーを手動で組み立てる場合はエンコード機能を使います。

活用例2：Data URLとしての画像埋め込み

HTMLやCSSでは、画像を外部ファイルとして参照するかわりに、Base64エンコードした画像データを直接埋め込む「Data URL」という形式が使えます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

メリットとしては、小さなアイコン画像を1リクエストで読み込めること、外部ファイルへの依存をなくせることがあります。一方でHTMLやCSSのファイルサイズが増加するため、大きな画像には向きません。

ツールの「Data URL形式」オプションを使えば、Base64文字列の先頭に “data:text/plain;base64,” のようなMIMEプレフィックスを自動付与できます。

活用例3：URL-safeモードの使い方

通常のBase64は ”+”、”/”、”=” を使いますが、URLのクエリパラメータにBase64文字列を含める場合、これらの文字はURLエンコードが必要になり扱いが複雑になります。

URL-safeモード（RFC 4648 §5）では次の置換を行います。

通常	URL-safe
”+"	"-"
"/"	"_"
"=“	省略（またはそのまま）

JWTトークン（JSON Web Token）はURL-safeなBase64を使っています。JWTのペイロード部分（ドット区切りの2番目の部分）をURL-safeモードでデコードすれば、トークンに含まれる情報を確認できます。

ツールのURL-safeスイッチを切り替えるだけで対応できます。

まとめ

Base64は「バイナリデータをASCIIテキストで表現する」ためのエンコーディング方式です。HTTP認証、Data URL、JWTなど、Webの至るところで使われています。

• エンコード: テキスト → Base64文字列
• デコード: Base64文字列 → 元のテキスト
• URL-safeモード: URLパラメータや JWT対応

変換のたびにコードを書く必要はありません。Base64変換ツールをブラウザで開いて貼り付けるだけで即座に変換できます。

→ Base64変換ツールを使ってみる

テキストの情報量を確認したい場合は文字数カウンターも合わせて使えます。文字数だけでなく、UTF-8バイト数もリアルタイムで計測できます。