Base64エンコードとは？仕組み・使いどころ・注意点を徹底解説
Base64エンコードとは
Base64は、バイナリデータをASCII文字列に変換するエンコード方式です。名前の通り、64種類の印刷可能な文字（A-Z、a-z、0-9、+、/）とパディング文字（=）を使って、あらゆるバイナリデータをテキスト形式で表現します。
「エンコード」と聞くと暗号化を連想するかもしれませんが、Base64は暗号化ではありません。誰でも簡単にデコード（復元）できる、単なるデータの表現方法の変換です。
Base64が解決する問題は根本的なものです。多くのプロトコルやシステムは、生のバイナリデータではなくテキストを扱うように設計されています。画像をメールで送る、フォントをCSSに埋め込む、バイナリデータをURLで渡す、といった場面で、バイト列を安全な印刷可能文字として表現する手段が必要になります。Base64はまさにその役割を果たします。
エンコードの仕組み
Base64のエンコードプロセスを段階的に見ていきましょう。
変換の流れ
- 入力データをバイト列（8ビット単位）として扱う
- バイト列を6ビット単位に分割する
- 各6ビットの値を変換テーブルで対応する文字に置き換える
- 出力が4の倍数になるようパディング（
=）を追加する
変換テーブル
6ビットで表現できる値は0〜63の64通りです。それぞれに以下の文字が対応します。
| 値の範囲 | 対応文字 | 文字数 |
|---|---|---|
| 0〜25 | A〜Z | 26 |
| 26〜51 | a〜z | 26 |
| 52〜61 | 0〜9 | 10 |
| 62 | + | 1 |
| 63 | / | 1 |
合計64文字に、パディング用の = を加えた65種類の文字で構成されます。
具体例：「ABC」のエンコード
「ABC」という文字列をBase64にエンコードする過程を追ってみましょう。
ステップ1: ASCIIコードへの変換
A = 65 = 01000001
B = 66 = 01000010
C = 67 = 01000011
ステップ2: 8ビット列を連結し、6ビット単位に分割
8ビット列: 01000001 01000010 01000011
6ビット列: 010000 | 010100 | 001001 | 000011
ステップ3: 変換テーブルで文字に置換
010000 = 16 → Q
010100 = 20 → U
001001 = 9 → J
000011 = 3 → D
結果: ABC → QUJD
パディングの仕組み
入力データのバイト数が3の倍数でない場合、6ビット分割で余りが生じます。この場合、足りないビットを0で埋め、出力が4文字の倍数になるよう = を追加します。
| 入力バイト数 | パディング | 例 |
|---|---|---|
| 3の倍数 | なし | ABC → QUJD |
| 余り1バイト | == |
A → QQ== |
| 余り2バイト | = |
AB → QUI= |
データサイズの増加
Base64エンコードでは、3バイトの入力が4文字の出力になります。つまり、元のデータに対して約33%（正確には4/3倍）サイズが増加します。
元データ: 3 バイト → Base64: 4 文字（4バイト）
増加率: (4 - 3) / 3 = 約33%
この点は、Base64を使用する際に常に考慮すべきトレードオフです。
主な使用場面
メール添付ファイル（MIME）
電子メールの通信プロトコル（SMTP）は、もともと7ビットASCIIテキストしか扱えない設計でした。画像やPDFなどのバイナリファイルをメールに添付するために、MIME（Multipurpose Internet Mail Extensions）規格でBase64エンコードが採用されています。
Content-Type: image/png
Content-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ
AAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5E
rkJggg==
Data URI（データURL）
HTMLやCSSに画像を直接埋め込む際にBase64が使われます。小さなアイコンやインライン画像をHTTPリクエストなしで表示できるため、リクエスト数の削減に有効です。
<!-- 小さなアイコンをData URIで埋め込み -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." alt="アイコン">
/* CSSでの背景画像埋め込み */
.icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}
ただし、Data URIにはいくつかの注意点があります。
- Base64化によりデータサイズが約33%増加する
- ブラウザのキャッシュが効かない（HTMLファイルと一体化するため）
- 大きな画像には不向き（目安として数KB以下の画像に限定すべき）
JWT（JSON Web Token）
認証トークンとして広く使われるJWTは、Base64URLエンコード（後述）を使用しています。JWTは3つのパートをドット（.）で連結した構造です。
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlRhbmFrYSJ9.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
各パートの内容は以下の通りです。
| パート | 内容 | デコード結果の例 |
|---|---|---|
| ヘッダー | アルゴリズム情報 | {"alg": "HS256", "typ": "JWT"} |
| ペイロード | ユーザー情報等 | {"sub": "1234567890", "name": "Tanaka"} |
| 署名 | 改ざん検知用 | (バイナリデータ) |
APIレスポンスでのバイナリデータ
JSON形式のAPIレスポンスにバイナリデータ（画像、ファイルなど）を含める場合にも、Base64エンコードが活用されます。
{
"fileName": "report.pdf",
"mimeType": "application/pdf",
"content": "JVBERi0xLjQKMSAwIG9iago8PA..."
}
モダンWeb開発でのBase64
Base64は従来のユースケースにとどまらず、現代のJavaScript APIやブラウザ機能の随所に登場します。
Fetch APIとバイナリレスポンス
Fetch APIでバイナリデータを取得した際、JSONに保存したり文字列のみ受け付けるAPIに渡すためにBase64変換が必要になることがあります。
// 画像をフェッチしてBase64に変換
async function fetchImageAsBase64(url) {
const response = await fetch(url);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result); // "data:image/png;base64,..."
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
// arrayBufferを使う方法
async function fetchAsBase64(url) {
const response = await fetch(url);
const buffer = await response.arrayBuffer();
const bytes = new Uint8Array(buffer);
const binary = bytes.reduce((acc, byte) => acc + String.fromCharCode(byte), '');
return btoa(binary);
}
FormDataとファイルアップロード
ファイルの内容とJSONメタデータを1つのリクエストにまとめたい場合、JSONにBase64で埋め込む方法があります。
// <input type="file">のファイルをBase64として読み込む
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
// reader.resultは "data:image/png;base64,ABC123..."
const base64 = reader.result.split(',')[1]; // データURIのプレフィックスを除去
resolve(base64);
};
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// JSONとして送信
async function uploadFile(file) {
const base64Content = await fileToBase64(file);
await fetch('/api/upload', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
filename: file.name,
mimeType: file.type,
content: base64Content,
}),
});
}
注意：大きなファイルにはmultipart/form-dataアップロードの方が効率的です。Base64は数百KB以下のファイルに適しています。
WebSocketとバイナリメッセージ
WebSocketはネイティブでバイナリフレームをサポートしていますが、バックエンドがJSONメッセージを期待している場合や、メッセージを簡単にログ・確認したい場合は、テキストベースのプロトコルの方が扱いやすいことがあります。
const ws = new WebSocket('wss://example.com/socket');
// バイナリデータをBase64としてテキストWebSocket経由で送信
function sendBinaryData(data) {
const bytes = new Uint8Array(data);
const binary = bytes.reduce((acc, b) => acc + String.fromCharCode(b), '');
ws.send(JSON.stringify({ type: 'binary', payload: btoa(binary) }));
}
// 受信
ws.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'binary') {
const binary = atob(msg.payload);
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
// bytesを処理...
}
};
CanvasとBase64
Canvas APIは画像のエクスポートにBase64を多用します。
const canvas = document.getElementById('myCanvas');
// CanvasをBase64のPNGとしてエクスポート
const pngBase64 = canvas.toDataURL('image/png'); // "data:image/png;base64,..."
const jpegBase64 = canvas.toDataURL('image/jpeg', 0.9); // 品質90%のJPEG
// プレフィックスを除去して保存・転送
const base64Only = pngBase64.replace(/^data:image\/png;base64,/, '');
プログラミング言語での実装
6つの主要言語でのBase64エンコード・デコードの方法を示します。
JavaScript（ブラウザ / Node.js）
// ブラウザ環境（btoa/atobは文字列を扱う。任意のバイナリには注意）
const encoded = btoa("Hello, World!"); // "SGVsbG8sIFdvcmxkIQ=="
const decoded = atob("SGVsbG8sIFdvcmxkIQ=="); // "Hello, World!"
// 日本語などマルチバイト文字列のエンコード
const encodeUnicode = (str) => btoa(
encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
(_, p1) => String.fromCharCode(parseInt(p1, 16)))
);
// Node.js（バイナリも扱いやすい）
const buf = Buffer.from("Hello, World!", "utf-8");
const encoded = buf.toString("base64");
const decoded = Buffer.from(encoded, "base64").toString("utf-8");
// Base64URL（URLセーフ）
const base64url = buf.toString("base64url");
Python
import base64
# 基本的なエンコード・デコード
encoded = base64.b64encode(b"Hello, World!").decode("utf-8")
# "SGVsbG8sIFdvcmxkIQ=="
decoded = base64.b64decode(encoded).decode("utf-8")
# "Hello, World!"
# URLセーフ版
url_safe = base64.urlsafe_b64encode(b"Hello+World/Test").decode("utf-8")
# ファイルのエンコード
with open("image.png", "rb") as f:
file_b64 = base64.b64encode(f.read()).decode("utf-8")
Go
package main
import (
"encoding/base64"
"fmt"
)
func main() {
// 標準Base64
encoded := base64.StdEncoding.EncodeToString([]byte("Hello, World!"))
fmt.Println(encoded) // "SGVsbG8sIFdvcmxkIQ=="
decoded, err := base64.StdEncoding.DecodeString(encoded)
if err != nil {
panic(err)
}
fmt.Println(string(decoded)) // "Hello, World!"
// URLセーフBase64（パディングなし）
urlEncoded := base64.RawURLEncoding.EncodeToString([]byte("Hello, World!"))
fmt.Println(urlEncoded) // "SGVsbG8sIFdvcmxkIQ"
}
Java
import java.util.Base64;
import java.nio.charset.StandardCharsets;
// Java 8+ 標準のBase64サポート
byte[] input = "Hello, World!".getBytes(StandardCharsets.UTF_8);
// 標準エンコーダー
String encoded = Base64.getEncoder().encodeToString(input);
// "SGVsbG8sIFdvcmxkIQ=="
byte[] decoded = Base64.getDecoder().decode(encoded);
String original = new String(decoded, StandardCharsets.UTF_8);
// "Hello, World!"
// URLセーフエンコーダー
String urlEncoded = Base64.getUrlEncoder().encodeToString(input);
// パディングなし
String noPadding = Base64.getEncoder().withoutPadding().encodeToString(input);
PHP
<?php
// 標準Base64
$encoded = base64_encode("Hello, World!");
// "SGVsbG8sIFdvcmxkIQ=="
$decoded = base64_decode($encoded);
// "Hello, World!"
// URLセーフBase64（PHPには組み込み関数がないため自作）
function base64url_encode(string $data): string {
return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}
function base64url_decode(string $data): string {
return base64_decode(strtr($data, '-_', '+/'));
}
Ruby
require 'base64'
# 標準Base64
encoded = Base64.strict_encode64("Hello, World!")
# "SGVsbG8sIFdvcmxkIQ=="
decoded = Base64.strict_decode64(encoded)
# "Hello, World!"
# URLセーフBase64
url_encoded = Base64.urlsafe_encode64("Hello, World!")
# MIMEスタイル（60文字ごとに改行）
mime_encoded = Base64.encode64("Hello, World!")
# "SGVsbG8sIFdvcmxkIQ==\n"
Base64の派生形式
Base64URL
URLやファイル名で使用できるよう、標準Base64の + を - に、/ を _ に置き換えた形式です。JWTやURLパラメータで使われます。パディングの = も省略されることがあります。
| 標準Base64 | Base64URL |
|---|---|
+ |
- |
/ |
_ |
=（パディング） |
省略可 |
MIME Base64
メール送信用に、76文字ごとに改行（CRLF）を挿入する形式です。
Base64と他のエンコード方式の比較
Base64だけがバイナリデータをテキストで表現する手段ではありません。用途に応じた使い分けが重要です。
比較表
| 方式 | 使用文字 | サイズ増加 | 主な用途 |
|---|---|---|---|
| Base64 | A-Z, a-z, 0-9, +, / | 約33% | メール、Data URI、JWT |
| Base64URL | A-Z, a-z, 0-9, -, _ | 約33% | URLパラメータ、JWT、OAuth |
| 16進数（Hex） | 0-9, a-f | 100% | チェックサム、ハッシュ値、デバッグ |
| パーセントエンコーディング | ASCII + %XX | 可変 | URLクエリ文字列 |
| ASCII85 (Base85) | 85種の印刷可能文字 | 約25% | PostScript、PDF内部 |
16進数エンコーディング（Hex）
Hexは各バイトをちょうど2桁の16進数で表します。出力は常に入力の2倍のサイズになります。
// バイトを16進数に変換
const bytesToHex = (bytes) =>
Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');
// SHA-256の出力はよく16進数で表示される
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
const hashHex = bytesToHex(new Uint8Array(hashBuffer));
// "a665a45920422f9d417e4867efdc4fb8..."
Hexを使うべき場面: チェックサム・ハッシュ値（MD5、SHA）、色値（#FF5733）、MACアドレス、バイトレベルのデバッグ。Hexは非効率ですが、人間にとってずっと読みやすいです。
パーセントエンコーディング（URLエンコード）
URLで使えない文字を %XX（XXは16進数のバイト値）に置換します。
encodeURIComponent("こんにちは")
// "%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF"
decodeURIComponent("%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF")
// "こんにちは"
パーセントエンコーディングを使うべき場面: クエリ文字列の値、フォーム送信、URLに特殊文字を含める場合。URLにBase64を使うのは誤りで、Base64URLかパーセントエンコーディングを使うべきです。
使い分けガイド
| 状況 | 使うべき方式 |
|---|---|
| JSONやXMLにバイナリデータを含める | Base64 |
| HTMLやCSSに画像を埋め込む | Base64（Data URI） |
| URLパラメータにトークンを含める | Base64URL |
| JWTの認証トークン | Base64URL |
| ハッシュ値の表示 | 16進数 |
| URLのクエリ文字列 | パーセントエンコーディング |
| 大きなバイナリファイルの転送 | いずれも不要 — multipart/form-dataを使う |
メリットとデメリット
メリット
- テキストベースのプロトコルでバイナリデータを安全に転送できる
- ASCII文字のみで構成されるため、文字化けのリスクがない
- JSONやXMLなどのテキストフォーマットにバイナリデータを埋め込める
- エンコード・デコードが高速で、実装も容易
- あらゆるプログラミング言語・環境でサポートされている
デメリット
- データサイズが約33%増加する
- エンコード・デコードの処理コストが（わずかながら）発生する
- 大量のバイナリデータの転送には非効率
- 可読性がない（人間が見て内容を判断できない）
- ブラウザのbtoa()はマルチバイト文字をネイティブに扱えない
セキュリティ上の注意点
Base64は暗号化ではない
最も重要な点として、Base64は暗号化ではありません。エンコードされたデータは誰でもデコードできます。パスワードやAPIキーなどの機密情報をBase64でエンコードしただけでは、セキュリティ対策にはなりません。
// これはセキュリティ対策にならない
const encoded = btoa("my-secret-password");
// "bXktc2VjcmV0LXBhc3N3b3Jk" → 誰でもデコード可能
機密情報を保護するには、AESなどの適切な暗号化アルゴリズムを使用してください。
JWTのペイロードは読み取り可能
JWTのペイロード部分はBase64URLでエンコードされているだけで、暗号化されていません。つまり、トークンを取得した人は誰でもペイロードの内容を読めます。JWTの署名は改ざん検知のためのものであり、内容の秘匿化のためではありません。
機密性の高いデータをJWTに含める必要がある場合は、JWE（JSON Web Encryption）を使用してペイロードを暗号化します。
入力の検証
外部から受け取ったBase64データをデコードする際は、入力の検証を忘れないでください。
function safeBase64Decode(input) {
// Base64文字列の形式チェック
if (!/^[A-Za-z0-9+/]*={0,2}$/.test(input)) {
throw new Error("Invalid Base64 string");
}
try {
return atob(input);
} catch {
throw new Error("Failed to decode Base64 string");
}
}
Base64のデバッグ
Base64の問題は頻繁に発生し、しばしば微妙です。よくある問題とその診断方法を解説します。
問題1：「無効な文字」またはデコード失敗
症状: atob() が InvalidCharacterError をスローする、またはサーバーが400エラーを返す。
原因: 文字列に有効でないBase64文字が含まれています。主な原因：
- MIMEのBase64やターミナルからコピーした出力に含まれる改行（
\n） - フォーマット中に追加されたスペース
- 標準Base64（
+、/）とBase64URL（-、_）を混同している
対策:
// デコード前にホワイトスペースを除去
const clean = base64String.replace(/\s/g, '');
const decoded = atob(clean);
// 標準とURLセーフの相互変換
const toUrlSafe = (b64) => b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
const toStandard = (b64url) => {
let s = b64url.replace(/-/g, '+').replace(/_/g, '/');
while (s.length % 4) s += '='; // パディングを復元
return s;
};
問題2：デコード後に文字化け（UTF-8問題）
症状: 日本語や絵文字がデコード後に文字化けする。
原因: btoa() はLatin-1の範囲（コードポイント0〜255）の文字しか扱えません。U+00FFを超える文字（日本語など）を渡すと、環境によってはエラーになるか不正な結果を返します。
対策:
// マルチバイト文字列の正しいエンコード方法
function encodeToBase64(str) {
const bytes = new TextEncoder().encode(str);
const binary = bytes.reduce((acc, b) => acc + String.fromCharCode(b), '');
return btoa(binary);
}
// マルチバイト文字列のデコード
function decodeFromBase64(base64) {
const binary = atob(base64);
const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
return new TextDecoder().decode(bytes);
}
問題3：パディングエラー
症状: 特定の入力でデコードが失敗する。
原因: Base64の出力長は4の倍数でなければなりません。Base64URLではパディング = が省略されることが多く、標準のデコーダーが失敗します。
対策:
function addPadding(base64) {
const pad = base64.length % 4;
if (pad === 2) return base64 + '==';
if (pad === 3) return base64 + '=';
return base64;
}
問題4：サイズが予想以上に大きい
症状: 1MBの画像がBase64エンコード後に1.37MBになる。
原因: これは想定通りの動作です。Base64は約33%のオーバーヘッドを追加します。
確認チェックリスト:
- Base64は本当に必要？バイナリ転送（multipart/form-data、バイナリWebSocket）は使えないか？
- 二重エンコードしていないか？（すでにエンコードされた文字列を再エンコードする）
data:image/png;base64,プレフィックスをサイズ計算に含めていないか？
問題5：btoa()が未定義
症状: Node.jsで ReferenceError: btoa is not defined
原因: btoa/atob はブラウザのグローバル関数で、Node.js v16から追加されましたが、古いバージョンでは使えません。
対策:
// すべてのNode.jsバージョンで動作
const encoded = Buffer.from(input, 'utf-8').toString('base64');
const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
クイック診断チェックリスト
| 症状 | 最も可能性の高い原因 | 最初の確認事項 |
|---|---|---|
| デコードでエラー | 無効な文字、または誤った変種 | ホワイトスペースを除去、+/-と//_を確認 |
| ASCII以外の文字化け | btoa前にUTF-8エンコードしていない | TextEncoderを使う |
| パディングエラー | 末尾の=が不足 | 長さが4の倍数になるようパディングを追加 |
| btoaが未定義 | 古いNode.js | Bufferを使う |
| 出力が大きすぎる | 想定通りの動作 | バイナリ転送を検討 |
Base64のエンコード・デコードをすぐに試したい場合は、Base64変換ツールをご利用ください。
よくある質問（FAQ）
Q: Base64は暗号化の一種ですか？
いいえ。Base64はエンコード方式であり、暗号化ではありません。鍵なしで誰でもBase64データを元に戻すことができます。パスワードやAPIキーの保護が必要な場合は、AES-256などの適切な暗号化アルゴリズムを使用してください。Base64はデータの表現変換であり、データの保護ではありません。
Q: なぜBase64はファイルサイズが33%増えるのですか？
3バイト（24ビット）の入力が4つのBase64文字（各6ビット）になるためです。つまり3バイトが4バイトになり、33.3%増加します。ほとんどの用途では許容範囲内ですが、大きなバイナリファイルにはバイナリ転送方式を検討してください。
Q: Base64とBase64URLの違いは何ですか？
標準Base64は62番目と63番目の文字として + と / を使います。これらはURLで特別な意味を持つため（+=スペース、/=パス区切り）、Base64URLでは - と _ に置換します。Base64URLはパディング = も省略することが多いです。JWT、OAuthトークン、URLパラメータにはBase64URLを使いましょう。
Q: HTMLに大きな画像をBase64で埋め込んでもいいですか？
技術的には可能ですが、大きな画像には推奨しません。Base64でサイズが約33%増加し、エンコードされた文字列はHTMLドキュメントに含まれるためブラウザが個別にキャッシュできません。Base64はごく小さな画像（目安として2KB以下）のインラインSVGアイコンや小さなUIスプライトに限定し、それ以外は適切なキャッシュヘッダーを持つ <img src="url"> を使ってください。
Q: btoa()に日本語を渡すとエラーになるのはなぜですか？
btoa() はLatin-1の範囲（コードポイント0〜255）の文字しか扱えません。日本語文字はコードポイントが255を超えるため、まずUTF-8バイトにエンコードする必要があります。TextEncoder でバイト列を取得し、バイナリ文字列に変換してから btoa() を呼び出してください。Node.jsでは Buffer.from(str, 'utf-8').toString('base64') が余分な手順なしに正しく処理します。
Q: JWTのペイロードをデコードしてデータを読む方法は？
JWTのペイロードは2番目のセグメント（2つのドットの間）です。パディングなしのBase64URLエンコードが使われています。
function decodeJwtPayload(token) {
const base64url = token.split('.')[1];
// Base64URLを標準Base64に変換
const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
// パディングを追加
const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
return JSON.parse(atob(padded));
}
注意：ペイロードは誰でも読めます。JWEで暗号化しない限り、JWTペイロードに機密情報を格納しないでください。
Q: Base64はモダンなWeb開発でも使われますか？
はい、今でも現役です。JWTによるAPI認証、メール添付ファイル、インライン画像、Canvas API、Web Crypto API、WebSocketのテストメッセージなど、至る所で使われています。HTTP/2やバイナリWebSocketフレームによって一部のユースケースは減りましたが、Webとバイナリデータを扱う開発者にとって基本的なツールであり続けています。
Q: 標準Base64とBase64URLはどちらを使えばいいですか？
JWTやOAuthトークンなどURLに現れるデータ、またはファイル名に使うデータにはBase64URLを使ってください。メール添付ファイル、Data URI、JSONに含めるバイナリデータなど、URLに現れないデータには標準Base64を使ってください。迷った場合は標準Base64を選び、URLに含める必要が出てきたら変換します。
まとめ
Base64はバイナリデータをテキスト形式に変換するシンプルかつ実用的なエンコード方式です。メールの添付ファイル、Data URI、JWT、APIレスポンス、Canvas API、Web Crypto APIなど、Web開発の多くの場面で活用されています。約33%のサイズ増加というトレードオフを理解した上で、他のエンコード方式（16進数、パーセントエンコーディング）と適切に使い分けることが重要です。そして最も大切な点として、Base64は暗号化ではないことを常に意識してください。