「画像、これどうやって送ればいい？」

フロントエンドの開発をしていて、ふと思ったことはありませんか？
「この小さなアイコン、わざわざ画像ファイルとしてリクエストを飛ばすほどでもないんだけどな……。なんとかテキストとして、コードの中に埋め込めないかな？」

Base64変換とは？エンコード・デコードの仕組みと注意点

あるいは、API でバイナリデータをやり取りしようとして、JSON の中で「文字化け」に絶望した経験。
そんなとき、私たちの救世主となってくれるのが Base64 という魔法の翻訳術です。

バイナリとテキストの「架け橋」

コンピュータの奥深くにある「0 と 1」のバイナリデータは、そのままではメールや JSON といった「テキストの世界」を通ることができません。強引に通そうとすると、途中でデータが壊れてしまいます。

そこで、バイナリを A-Z や 0-9 といった「誰にでも読める 64 種類の文字」に置き換える。
これが Base64 エンコードの本質です。いわば、壊れやすいガラス細工（バイナリ）を、頑丈な段ボール（テキスト）に梱包して送るようなイメージですね。

仕組み：3バイトを4文字に変換する

Base64は64種類の文字を使います：A-Z（26）、a-z（26）、0-9（10）、+、/ でちょうど64種類。これは6ビット（2⁶ = 64）で表現できます。

アルゴリズムは入力を3バイト（24ビット）ずつ処理し、それを6ビットずつ4つに分割して、各グループを文字に対応させます。

入力バイト:      M         a         n
2進数:     01001101  01100001  01101110
                 ↓ 6ビット×4に再分割 ↓
グループ:  010011  010110  000101  101110
インデックス: 19      22       5      46
文字:         T      W       F       u
出力:     T W F u

入力の長さが3の倍数でないときは、出力が4文字の倍数になるようにパディング文字（=）を付けます。

  • 残り1バイト → Base64 2文字 + ==
  • 残り2バイト → Base64 3文字 + =

エンジニアなら知っておきたい「梱包コスト」

ただし、この「梱包」にはちょっとした副作用があります。

Base64 に変換すると、データサイズは元の 約 1.3 倍 に膨れ上がります。
「便利だから」といって、巨大な高画質画像をすべて Base64 にして HTML に埋め込んでしまうと、ページの読み込みがカメのように遅くなってしまいます。

「小さなアイコンは Base64 でサクッと」「大きな写真はファイルとしてスマートに」。
この使い分けができるようになると、あなたのコードはもっと洗練されたものになります。

Base64をエンコード・デコードする手順

文字列や小さなデータをBase64に変換したいときは、まず元データが「テキスト」なのか「バイナリ」なのかを確認します。
APIの値を調べるだけなら、テキストとして貼り付けて変換するだけで十分です。

  1. 変換したい文字列、またはBase64文字列をコピーする。
  2. Base64/58/32 変換ツール に貼り付ける。
  3. エンコードかデコードを選ぶ。
  4. 結果が文字化けしていないか確認する。
  5. 必要に応じてBase58やBase32との違いも確認する。

たとえば hello をBase64にすると、次のようになります。

aGVsbG8=

逆に aGVsbG8= をデコードすると、元の hello に戻ります。
最後の = はパディングと呼ばれる調整用の文字で、データ長を揃えるために付くことがあります。

Base64がよく使われる場面

Base64は「バイナリをテキストとして扱いたい」ときに便利です。
代表的な用途は次の通りです。

  • JSON内で小さな画像やファイル断片を扱う
  • Basic認証のユーザー名とパスワードをエンコードする
  • JWTのヘッダーやペイロードを表現する
  • メールや古いプロトコルでバイナリを安全に送る
  • Data URLとして小さな画像をHTMLやCSSに埋め込む

ただし、Base64は暗号化ではありません。
デコードすれば元の内容が読めるため、パスワードや秘密情報を「隠す」目的では使わないでください。

Base64・Base58・Base32の違い

似た名前のエンコード方式がいくつかありますが、使われる場面は少し違います。

種類特徴よく使われる場面
Base6464種類の文字で効率よく表現できるAPI、JWT、Data URL
Base58紛らわしい文字を避ける暗号資産のアドレスなど
Base32大文字英数字中心で扱いやすいOTP、識別子、DNS周辺

迷ったら、Web開発やAPIではBase64を使う場面が多いです。
人間が手で読み書きする可能性がある識別子では、見間違いを避けやすいBase58やBase32が選ばれることがあります。

Base64Url：URLで安全に使える変種

標準のBase64は + と / を使いますが、これらはURLで特別な意味を持ちます（+ はスペース、/ はパス区切り）。Base64Url はこれらを - と _ に置き換え、URL・Cookie・HTTPヘッダーでそのまま安全に使える文字列を生成します。

JWTがBase64Urlを使うのはこのためです。3つのセグメント（ヘッダー・ペイロード・署名）はそれぞれBase64Urlでエンコードされ、トークン全体をAuthorizationヘッダーやクエリパラメータに載せられます。

// 標準Base64 — + / = を含む可能性
btoa('binary data with /')

// Base64Url — URLで安全
function toBase64Url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');  // パディングを除去（任意）
}

言語別のエンコード・デコード

// JavaScript（ブラウザ / Node.js）
const encoded = btoa('Hello, World!');        // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob('SGVsbG8sIFdvcmxkIQ=='); // "Hello, World!"

// 日本語など多バイト文字はUTF-8経由でエンコードする
function encodeUnicode(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
      (_, p1) => String.fromCharCode(parseInt(p1, 16)))
  );
}
# Python
import base64
base64.b64encode(b'Hello, World!')          # b'SGVsbG8sIFdvcmxkIQ=='
base64.urlsafe_b64encode(b'binary+data/')   # + と / が置換される
// Go
import "encoding/base64"
base64.StdEncoding.EncodeToString([]byte("Hello, World!"))
base64.RawURLEncoding.EncodeToString([]byte("Hello, World!")) // URLセーフ・パディングなし

btoa の制限： btoa はLatin-1文字列しか扱えません。絵文字やCJK文字などの多バイトUnicodeは、上記のように先にUTF-8バイトへ変換する必要があります。

DevToolKits で「サクッと」変換

「この Base64、元は何だったっけ？」「この文字列を Base58 に変えたい」。
そんなときは、当サイトの Base64/58/32 変換ツール を使ってみてください。

ボタン一つで、複雑なエンコード・デコードが完了します。
バイナリデータの扱いをもっと身近に、もっと楽しく。あなたの開発を、ちょっとだけ軽やかにするお手伝いをさせてください。

よくある質問

Base64は暗号化ですか？

いいえ。Base64は暗号化ではなく、データ表現を変換するエンコードです。
誰でもデコードできるため、秘密情報を守る目的では使えません。

末尾の = は消してもいいですか？

= はパディングです。用途によっては省略されることもありますが、互換性を重視するなら残しておくのが安全です。
JWTなど一部の形式では、URLに載せやすいBase64URL表現としてパディングが省略されることがあります。

Base64にすると容量は増えますか？

増えます。Base64化すると、元データよりおよそ33%大きくなります。
大きな画像や動画をBase64で埋め込むとページが重くなりやすいので注意してください。

まとめ

Base64 は、デジタルな世界の「共通言語」のような存在です。
仕組みを理解し、その性質（ちょっと太っちゃうこと！）に寄り添いながら使いこなすことで、データ連携の悩みはぐっと少なくなります。さあ、今日も軽快にコードを書いていきましょう！