Base64とは？画像にいつ使うべきか
誰かのCSSやHTMLで data:image/png;base64,iVBOR... という巨大な文字列を見かけて、これは何だろうと思ったことはありませんか。それがBase64でエンコードされた画像です。ここではBase64が実際に何をしているのか、画像をテキストとして埋め込むのがよい場面と、そうでない場面を説明します。
結論から言うと
Base64は、バイナリデータ（画像など）をプレーンテキストとして表現する方式で、別ファイルとして読み込む代わりに、コードの中——HTML属性、CSSファイル、JSONのペイロード——に直接埋め込めるようにします。データサイズは約33%大きくなるため、ごく小さなアセットに向いています。画像をエンコードするには PNGをBase64に変換。文字列を元に戻すには Base64をPNGに変換。どちらもブラウザ内で動作します。
Base64の実態
Base64はエンコード方式であり、暗号化でも圧縮でもありません。バイナリデータ3バイトごとに、印字可能なASCII文字4つ（A-Z、a-z、0-9、+、/）へ対応づけます。これにより、どんなファイルでも——画像でもフォントでも何でも——安全なテキスト文字の並びとして書き表せます。これが便利なのは、テキストしか受け付けない場所があるからです。HTML文書の途中、CSSのスタイルシート、JSON APIのレスポンス、メールの本文などです。Base64にエンコードすれば、こうしたテキスト専用の経路を通じてバイナリデータを運べます。3バイトが4文字になるため、エンコード後は元のファイルより約33%大きくなります。
Data URI：画像をインラインで埋め込む
Web開発でBase64を最もよく使うのがData URIです。ブラウザに別ファイルを取得させる <img src="logo.png"> の代わりに、<img src="data:image/png;base64,iVBOR..."> と書けば、画像がHTMLそのものの中に入って運ばれます。形式は data:[mime-type];base64,[the-base64-string] です。CSSでも同じように動き——background-image: url(data:image/png;base64,...)——多くの小さなアイコンはこの方法でインライン化されています。
使うべきとき（と使わないべきとき）
Base64でのインライン化は、HTTPリクエスト1回をペイロードの肥大化と引き換えにするものなので、小さなアセットでないと割に合いません。
- 向いている用途：ごく小さなアイコンやスプライト、あるいは単一の小さなロゴなど、数百バイトの増加よりネットワークリクエストを1回減らすことのほうが重要な場合。
- 向かない用途：写真や大きな画像。約33%のサイズ増がHTML/CSSを膨らませるうえ、インライン化したデータは個別にキャッシュしたりページ間で再利用したりできないため、毎回ダウンロードし直すことになります。
- こんなときにも便利：テキスト専用の経路——JSON API、設定ファイル、メールなど、実ファイルを添付できない場所——を通じて画像を運びたいとき。
エンコードとデコードの方法
一回限りの変換なら、コードを書く必要はありません。
- 画像をBase64に：PNGをBase64に変換、JPGをBase64に変換——出力結果をそのままHTML/CSSに貼り付けられます。
- Base64をファイルに戻す：Base64をPNGに変換、Base64をJPGに変換——文字列を貼り付ければ（data:接頭辞ありでもなしでも）画像をダウンロードできます。
これらはすべてブラウザ内で完結するので、ただのエンコードであっても、あなたの画像がサーバーにアップロードされることは一切ありません。
FAQ
Base64は暗号化ですか？
いいえ。Base64は暗号化ではなくエンコードで、セキュリティ効果はまったくありません。誰でもBase64文字列を瞬時に元のデータへデコードできます。データを隠したり保護したりするためではなく、バイナリデータをテキストとして表現するためだけに存在します。
なぜBase64画像は元のファイルより大きいのですか？
Base64はデータ3バイトをテキスト4文字で表すため、サイズが約33%増えます（data:接頭辞を含めるともう少し増えます）。このオーバーヘッドは、テキスト専用の経路でバイナリデータを運ぶための代償であり、Base64が小さなアセットにしか割に合わない理由でもあります。
Data URIとは何ですか？
Data URIは、data:[mime-type];base64,[data] という形式でファイルをURLに直接埋め込むものです。Webページでは、別ファイルへリンクする代わりに <img> の src やCSSの背景にそのまま画像を入れられるので、画像が文書とともに読み込まれ、追加のリクエストが不要になります。
画像をBase64でインライン化すべきなのはどんなときですか？
ごく小さく重要な画像——小さなアイコンやロゴ——で、ネットワークリクエストを1回減らすことが多少のサイズ増に見合う場合です。写真や大きなグラフィックでは避けましょう。サイズの増加と個別キャッシュが効かないことで、通常どおりリンクしたファイルのほうが速いのが普通です。
Base64文字列を画像に戻すにはどうすればいいですか？
Base64から画像への変換ツールに貼り付けてください。ConvertBlinkでは、Base64をPNGに変換やBase64をJPGに変換が、生の文字列でも完全なdata: URIでも受け付け、ダウンロードできる画像にしてくれます。しかもブラウザ内で動くので、何もアップロードされません。
デコードするとき data: 接頭辞は含めますか？
どちらでも構いません。優れたデコーダーは、完全なData URI（data:image/png;base64,iVBOR...）でも、カンマ以降の生のBase64部分だけでも受け付けます。生の文字列しか手元になくても、ツールはちゃんとデコードします。