← PC・IT用語集へ戻る

Base64

Base64
data development beginner
画像やバイナリデータなどの情報を、64種類の文字を中心とするテキスト表現へ変換するエンコード方式。
Base64 (Base64)

概要(サマリー)

Base64(ベースロクジュウヨン)とは、画像、音声、PDF、または実行プログラムなどの「バイナリデータ」を、インターネット上で扱いやすい形にするために、決められた64種類の文字(アルファベット、数字、一部の記号)を中心とする「テキストデータ」に変換するエンコード(符号化)方式である。

データの破損を防ぎやすくし、メールの送信やWebサイトのコード内への画像埋め込みなどの用途で広く使われている。

詳細解説

1. Base64が必要とされる理由

インターネットの黎明期に作られた電子メールや通信プロトコル(仕組み)は、もともと「英語のアルファベットや数字」のような単純なテキストデータのみをやり取りすることを前提として設計されていた。

そこに、特殊なデータを含む画像やファイルをそのまま流そうとすると、途中の通信機器が特定のコードを勝手に「改行」や「制御命令」と勘違いして書き換えてしまい、届いたデータが壊れてしまうという問題が多発した。

この問題を解決するため、「どのようなバイナリデータであっても、通信中に壊れにくい文字の並びへ一度変換して送り、受け取った側で元に戻す(デコードする)」というルールが考案された。これがBase64である。

2. Base64で使用される64文字

Base64という名前の通り、基本のデータ部分では以下の64種類の文字を使ってすべてのデータを表現する。

  • 英大文字(A〜Zの26文字)
  • 英小文字(a〜zの26文字)
  • 数字(0〜9の10文字)
  • 記号( +/ の2文字)

なお、変換する際にデータの長さ(バイト数)が足りない場合は、末尾を埋める(パディング)記号として = が追加される。そのため、Base64データの末尾は === で終わることが多い。

3. Web開発における活用法(Data URL)

Web開発において、Base64は「Data URL(またはDataスキーム)」という手法でよく使われる。

小さなアイコン画像などを、独立した別のファイルとして用意するのではなく、Base64形式のテキストデータに変換して、HTMLCSSコードの中に直接埋め込んで表示させる方法である。

以下は、HTMLの <img> タグの内部に、Base64化した画像データを直接埋め込んで表示させる記述例である。

<!-- 画像ファイルを別読み込みせず、Base64テキストとしてHTMLに直接埋め込む例 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="テスト画像" />

この方法を用いると、ブラウザが画像をダウンロードするための接続(HTTPリクエスト)の回数を削減できるため、Webサイトの表示速度を最適化できるメリットがある。

4. Base64のデメリット

Base64は非常に便利だが、大きな弱点がある。

データをBase64の文字列にエンコードすると、データの総容量が元のバイナリサイズよりも約1.33倍(33%増)に膨れ上がってしまう。

そのため、容量の大きな写真や動画ファイルをBase64にしてHTMLに埋め込むと、かえってHTML全体のファイルサイズが巨大化し、Webサイトの読み込み速度が大幅に低下してしまう。

埋め込むのは「数キロバイト以下の小さなアイコンやロゴ」に限定すべきである。

AIコーディングとの関係

Webフォームから画像をアップロードさせたり、Web API経由でファイルをやり取りするプログラムを開発する際、AIはBase64を活用したコードを提示することが非常に多い。

例えば、「JavaScriptを用いて、ユーザーが選択した画像をBase64文字列に変換し、JSONデータとしてAPIサーバーに送信するフロントエンドコードを書いて」と指示すれば、AIは FileReader というブラウザ標準のオブジェクトを使った正確なコードを即座に生成できる。

AIコードを使用する際は、容量制限の記述(バリデーション)が漏れていないかを確認し、「1MB以上のファイルはBase64化を拒否する処理を追加して」などの指示を追加することで、サーバーのメモリ負荷を抑える堅牢なプログラムを作ることができる。

よくある勘違い

Base64は暗号化技術の一種?

いいえ、Base64は誰でもルール(文字対応表)を知っていれば、パスワードや鍵を使わなくても即座に元(バイナリ)に戻すことができるデータ変換(エンコード)である。セキュリティを守るための「暗号化」としての効果は全くないため、パスワードや個人情報をBase64にして送信するのは極めて危険である。

すべてのWeb画像をBase64化してHTMLに埋め込むべき?

いいえ、前述の通りデータサイズが約33%増加するため、容量の大きい画像(写真など)をBase64にするとWebサイトの表示速度が低下し、SEOやユーザー体験に悪影響を及ぼす。基本的には、ロゴやソーシャルメディアのアイコンなどの「小さな画像」のみに限定すべきである。

ファイルの末尾に「=」がたくさん付くのは文字化け(バグ)?

いいえ、これは文字化けではない。Base64はデータを3バイト単位で処理するため、元のデータの長さが3バイトで割り切れなかった場合、端数を埋めるために末尾に === という記号を足して長さを揃える「パディング」という正常な処理である。

まとめ

  • Base64は、バイナリデータをインターネット上で扱いやすくするために64種類の文字を中心としたテキストへ変換する規格である
  • HTMLやCSSの中に直接小さな画像をテキストとして埋め込む「Data URL」で広く使われる
  • エンコードするとデータサイズが約3割増加するため、大きなファイルには適していない

情報ソース

より詳しくAIに聞いてみよう

  • AIを使って、ローカルにあるPNG画像をPythonでBase64文字列に変換し、コンソールに表示するスクリプトを生成してください。
  • Base64エンコードにおいて、3バイト(24ビット)のデータがどのように6ビットずつに分割されて64文字に変換されるのか、仕組みを詳しく説明してください。
  • Web制作で、画像をCSSの背景画像(background-image)としてBase64で直接埋め込む際の記述方法と注意点を教えてください。
  • AIエージェントに「Base64で送信されてきたPDFのテキストをデコードして保存するNode.jsのコード」を書かせる際の、適切なエラー処理について教えてください。
  • Web APIでファイルを送信する際、Base64を使ってJSONに埋め込む方法と、マルチパート(multipart/form-data)を使ってバイナリで送る方法の違いと使い分けを教えてください。