画像 → Base64

Base64 とは？

Base64 はバイナリデータをテキストに変換するエンコーディング方式で、64 種類の印刷可能な ASCII 文字（大文字 A–Z、小文字 a–z、数字 0–9、プラス記号（+）、スラッシュ（/））を使用してバイナリデータを表現します。等号（=）は末尾のパディングに使われます。3 バイトのバイナリ入力が 4 つの Base64 文字としてエンコードされるため、エンコード後の出力は元のバイナリより約 33% 大きくなります。Base64 は元々 RFC 2045 で MIME メール添付のために定義されましたが、現在では JSON、XML、HTML、CSS、JavaScript ソースコード、data URL など、バイナリデータをテキスト専用チャネルで転送する必要がある場面で広く使用されています。

Base64 の出力はプレーンテキストであるため、ソースファイルに安全に埋め込み、クリップボードでコピーし、HTTP リクエストで送信し、他のテキストフィールドと共にデータベースに保存できます。バイナリのエスケープは不要です。特に画像の場合、ファイルを Base64 としてエンコードすることで、画像アセットを取得するための個別 HTTP リクエストを省き、画像データ全体を HTML、CSS、JavaScript ファイルに直接インライン埋め込みできます。

画像を Base64 に変換する理由

画像を Base64 文字列に変換する実用的な理由はいくつかあります。最も一般的なのは、Web ページの読み込みに必要な HTTP リクエスト数を減らすことです。ブラウザが個別の .png や .jpg ファイルを要求する代わりに、画像データが直接 HTML や CSS に埋め込まれます。他のユースケースには、画像を JSON や XML ペイロードに埋め込む、アイコンや小さなグラフィックをソースコードに保存する、メール、リッチテキストエディタ、単一ファイル HTML ドキュメントに画像を含める準備をする、などがあります。

Base64 は、アイコン、ロゴ、箇条書き、装飾的な UI グラフィックなどの小さな画像に特に効果的です。これらのケースでは、追加の HTTP リクエストのオーバーヘッドがエンコードのサイズペナルティを上回る可能性があります。大きな写真の場合はトレードオフがあまり有利ではありません。エンコードされた文字列は元のバイナリより約 33% 大きくなり、ブラウザが個別にキャッシュすることもできないからです。

Base64 画像を使う場面

画像を別ファイルとして提供するよりもインライン化する方が便利または効率的な多くの場面で、画像を Base64 に変換するのは理にかなっています。最も一般的なシナリオは次のとおりです：

• インライン CSS 背景画像。小さな背景グラフィックやテクスチャは data URL として CSS に直接埋め込め、追加リクエストを省けます。
• HTML メールの署名とコンテンツ。多くのメールクライアントはデフォルトで外部画像をブロックします。Base64 画像をインライン化すれば即座に表示されます。
• 単一ファイル HTML 納品物。単一の .html ファイルとして共有する必要があるレポート、ダッシュボード、プロトタイプは、すべての画像をインライン埋め込みできます。
• JSON と XML ペイロード。画像アップロードを受け付ける API は、マルチパートフォームのアップロードが不便な場合、Base64 文字列フィールドを受け付けることがよくあります。
• ソースコードのアイコン。コンポーネントやライブラリが使用する小さなアイコンは、.js や .ts ファイル内に Base64 文字列として保存できます。
• ファーストビューのグラフィックの遅延インライン化。クリティカルなヒーロー画像やロゴはインライン化して、ネットワーク往復を待たずに最初のペイントでレンダリングできます。

ブラウザのキャッシュ、CDN 配信、遅延読み込みが重要な大きな写真画像には Base64 を避け、それらは別の画像ファイルとして保持し、通常の URL で配信してください。

画像を Base64 に変換する方法

このツールを使って画像を Base64 に変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード、登録、インストールは不要です。ツールは FileReader API でファイルを読み込み、Data URL または純粋な Base64 文字列を出力します。次の 4 つの手順に従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、.jpg、.png、.webp、.gif、.bmp、.svg ファイルをドラッグ＆ドロップします。画像はローカルでデコードされ、プレビューとして表示されます。
2. 出力形式を選択。HTML や CSS に直接ドロップできる文字列には「Data URL」を、data: プレフィックスなしの生エンコード文字列には「純粋な Base64」を選択します。
3. Base64 に変換。「Base64に変換」ボタンをクリックします。Base64 テキストが結果ボックスに表示され、確認できます。
4. コピーまたはダウンロード。「クリップボードにコピー」で文字列をコードに貼り付けるか、「.txt をダウンロード」でテキストファイルとして保存します。

すべてのステップは JavaScript を使用してブラウザ内でローカルに実行されるため、画像がサーバーにアップロードされることはありません。これにより変換は完全にプライベートで高速、機密性の高い画像にも適しています。

Data URL と純粋な Base64 の違い

2 つの出力形式は異なる目的を持ちます。違いを理解することで、ユースケースに合ったものを選択できます。

• Data URL (data:image/png;base64,...)——MIME タイプと Base64 ペイロードを含む完全な URL スキーム。<img> タグの src 属性、CSS の url()、ブラウザのアドレスバーに直接貼り付けられます。HTML や CSS でインライン使用するのに最も便利な形式です。
• 純粋な Base64 (iVBORw0KGgo...)——data: プレフィックスや MIME タイプのない、Base64 エンコードされたバイトのみ。API エンドポイントにデータを送信する場合や、生のエンコードデータをデータベースフィールドに保存する場合など、消費側のアプリケーションがコンテンツタイプを既に知っていて独自のプレフィックスを追加する場合に使用します。

経験則：マークアップやスタイルシートに画像を直接埋め込む場合は Data URL を選択し、画像データを API に送信する場合や生のエンコード文字列を期待するシステムで作業する場合は純粋な Base64 を選択してください。