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形式のテキストデータに変換して、HTMLやCSSコードの中に直接埋め込んで表示させる方法である。
以下は、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)を使ってバイナリで送る方法の違いと使い分けを教えてください。