Base64エンコーディング完全攻略：開発者のための使用ガイド

Base64とは何ですか？なぜ画像をテキストに変換するのですか？開発中によく出会うBase64エンコーディングのすべてを分かりやすく説明します。

1. Base64とは？

Base64はバイナリデータ（画像、ファイルなど）をテキスト形式に変換するエンコーディング方式です。64個の安全な文字（A-Z、a-z、0-9、+、/）だけを使用してデータを表現します。

例：

元のテキスト: Hello

Base64エンコード: SGVsbG8=

2. なぜBase64を使うのか？

理由 #1: メール送信

メールはテキストのみ送信できます。画像添付ファイルはBase64に変換されて送信されます。

理由 #2: Data URI

HTML/CSSで画像を直接挿入する際にBase64を使用します。

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

理由 #3: API認証

Basic Authenticationでusername:passwordをBase64でエンコードして送信します。

3. Base64の長所と短所

長所：

• ✅ バイナリデータをテキストとして安全に送信
• ✅ 別途ファイルアップロード不要でHTML/CSSに画像挿入可能
• ✅ HTTPリクエスト数削減（小さいアイコン）

短所：

• ❌ 容量が約33%増加
• ❌ 大きな画像には不向き
• ❌ ブラウザキャッシング不可

4. Base64使用例

例 1: 小さいアイコン挿入

ウェブサイトの読み込み速度を上げるため、小さいアイコン（10KB以下）をBase64でエンコードしてCSSに直接挿入します。

例 2: JWTトークン

JSON Web TokenはHeaderとPayloadをBase64でエンコードします。

例 3: 画像プレビュー

ファイルアップロードプレビュー機能で画像をBase64に変換して即座に表示します。

5. Base64エンコード/デコード方法

JavaScript:

// エンコード const encoded = btoa("Hello");  // "SGVsbG8=" // デコード const decoded = atob("SGVsbG8=");  // "Hello"

Python:

import base64 # エンコード encoded = base64.b64encode(b"Hello") # デコード decoded = base64.b64decode(encoded)

6. Base64は暗号化ではありません！

まとめ

Base64は開発者なら必ず知っておくべき基本概念です。いつ使用し、いつ使用しないべきかを正しく理解するだけでも、Web性能最適化に大きく役立ちます。

Cheetsetがあなたの開発の旅を応援します！🚀