Base64エンコーディングは、バイナリの画像データをプレーンテキスト文字列に変換し、別のファイルを参照せずにHTML、CSS、JSON、メールに画像を直接埋め込めるようにします。デメリットはサイズが約33%増加すること — 100KBの画像はBase64にすると約133KBになります。小さなアイコンやメールには最適ですが、大きな画像には不向きです。

Base64エンコーディングとは？

Base64は、バイナリデータを64種類の印刷可能なASCII文字（A–Z、a–z、0–9、+、/）で表現するバイナリ・テキスト変換方式です。バイナリデータ3バイトごとに Base64文字4つに変換されるため、エンコードされた出力は常に元のデータより約33%大きくなります。

画像の場合、ブラウザが解釈方法を認識できるよう、通常はデータURIスキームのプレフィックスを付けます:

data:image/jpeg;base64,/9j/4AAQSkZJRgAB...

この自己完結型の文字列は、URLが使用可能な場所ならどこでも利用できます — <img>のsrc属性、CSSのbackground、JSONフィールド、メールのHTML本文など。

Base64画像を使うべき場面

小さなアイコンとインラインSVG（5KB未満） — 小さなアイコンを埋め込むことで余分なHTTPリクエストを省けます。アイコンが多いページではこの節約効果が積み重なります。
メールHTML — 多くのメールクライアント（Outlook、特定モードのGmailなど）は外部リンク画像をブロックします。画像をBase64データURIとして埋め込めば、必ず表示されます。
CSSデータURI — 小さな背景パターンやスプライトをスタイルシートにインラインで埋め込むことで、 CSSと共に単一のリクエストで読み込めます。
JSON APIペイロード — JSONのみを受け付けるAPI（例：機械学習エンドポイントへのサムネイル送信）で画像を転送する必要がある場合、Base64を使えばテキストフィールドにバイナリデータを含めることができます。
単一ファイルHTMLドキュメント — 外部アセットなしで完全に自己完結する必要があるプレゼンテーション、レポート、オフラインツールなどに適しています。

Base64を使うべきでない場面

大きな画像 — 33%のサイズオーバーヘッドが急速に蓄積します。1MBの写真は1.33MBのBase64テキストになり、 HTMLやJSONペイロードが大幅に肥大化します。
ブラウザキャッシュが必要な画像 — ブラウザは画像ファイルを独立してキャッシュします。Base64で埋め込まれた画像は HTMLやCSSファイルの一部となるため、別途キャッシュできず、毎回のページ読み込みで再ダウンロードされます。
複数のページで使用する画像 — 同じ画像が10ページにBase64でエンコードされている場合、ブラウザがキャッシュされた 1つのファイルを取得する代わりに、エンコードされた文字列全体を10回送信することになります。
パフォーマンスが重要なページ — 大きなインラインデータURIはHTMLの解析を遅らせ、Time to First Byteを増加させ、 JSファイルに埋め込まれるとJavaScriptバンドルを肥大化させます。

オンラインで変換する

画像が一般的でない形式の場合は、まず PicovertのImage ConverterでJPEGまたはPNGに変換してから、 Base64エンコーダーツールに貼り付けてください（「base64 image encoder」で検索すると多くの無料ツールが見つかります）。ほとんどのオンラインツールはJPG、PNG、GIF、WebP、 SVGに対応しており、すぐに貼り付けられる完全なデータURI文字列を返します。

JavaScriptで変換する

ブラウザ環境では、FileReader APIを使用してFileまたはBlobオブジェクトを読み取り、Base64ペイロードを含むデータURI文字列を返すことができます:

const toBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
  })

// ファイル入力との使用例
const input = document.querySelector('input[type="file"]')
input.addEventListener('change', async () => {
  const base64 = await toBase64(input.files[0])
  console.log(base64) // "data:image/jpeg;base64,..."
})

Node.js（v18+）では、組み込みのfsモジュールとBufferを使用します:

import { readFileSync } from 'fs'

const buffer = readFileSync('image.jpg')
const base64 = buffer.toString('base64')
const dataUri = `data:image/jpeg;base64,${base64}`

Pythonで変換する

Pythonの標準ライブラリにはbase64モジュールが含まれており、追加パッケージは不要です:

import base64

with open("image.jpg", "rb") as f:
    data = base64.b64encode(f.read()).decode("utf-8")

# 完全なデータURIを構築
data_uri = f"data:image/jpeg;base64,{data}"
print(data_uri)

形式に合わせてimage/jpegをimage/png、image/webp、image/gifなどに変更してください。

コマンドラインで変換する

macOS / Linux — base64コマンドはシステムに組み込まれています:

base64 -i image.jpg -o image_base64.txt

Windows PowerShell:

[Convert]::ToBase64String([IO.File]::ReadAllBytes('image.jpg')) | Out-File image_base64.txt

どちらのコマンドも、データURIプレフィックスなしの純粋なBase64文字列をテキストファイルに書き込みます。HTMLやCSSで使用する際は、手動でdata:image/jpeg;base64,を先頭に付けてください。

HTMLで使用する

src属性を完全なデータURIに置き換えます:

<img
  src="data:image/jpeg;base64,{YOUR_BASE64_STRING}"
  alt="埋め込み画像"
  width="200"
  height="150"
/>

{YOUR_BASE64_STRING}を実際のエンコードされた値に置き換えると、ブラウザは通常の画像URLと同様にデコードしてレンダリングします。

CSSで使用する

データURIはbackground-imageを含むURLを受け付けるCSSプロパティならどこでも機能します:

.icon {
  background-image: url("data:image/png;base64,{YOUR_BASE64_STRING}");
  background-size: contain;
  width: 24px;
  height: 24px;
}

HTTPリクエストをなくすことによる節約効果がサイズ増加を上回る小さなアイコンや繰り返しパターンに最も効果的です。

エンコード前に圧縮する

Base64はファイルサイズを約33%増加させるため、最終的なエンコードされた文字列をできるだけ小さく保つために、常に先に画像を圧縮してください。 Picovertの画像圧縮ツールは、目に見える品質低下なしに JPEG、PNG、WebPのファイルサイズを大幅に削減します。200KBの画像を60KBに圧縮すると、 Base64文字列は約267KBではなく~80KBになります。HTMLドキュメントやJSONペイロード内に含まれる場合、これは意味のある差です。

まとめると：Base64は、メールHTML、小さなアイコン、APIペイロードのように自己完結型でサーバーに依存しない画像が必要な場合に適切なツールです。それ以外の場合は、通常のファイルURLを使用してページ読み込み時間を速く保ち、ブラウザキャッシュを活用してください。そして、Base64を使用する場合は必ず先に圧縮しましょう。