画像を Base64 データ URL に変換する方法

Base64 画像データ URL とは何ですか？

Base64 画像データ URL は、画像ファイル全体をテキスト文字列として Web 文書に直接埋め込み、画像を読み込むための個別の HTTP リクエストを不要にします。ブラウザが外部ファイルを取得する代わりに、画像データは HTML や CSS 内にすでに存在しています。

形式は次のようになります:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

分解すると:

• data: — データ URI スキームのプレフィックス
• image/png — 埋め込まれた画像の MIME タイプ
• ;base64 — Base64 エンコーディングを示します
• ,iVBORw0... — 実際の Base64 エンコードされた画像データ

なぜ画像を Base64 に変換するのですか？

画像を Base64 として埋め込むことは、いくつかのシナリオで役立ちます:

HTTP リクエストを減らす

外部画像ファイルごとに個別の HTTP リクエストが必要です。Base64 データ URL はこれらのリクエストを排除し、ページの読み込み時間を改善できます — 特に高遅延の接続や、小さなアセットが多数あるページで効果的です。

自己完結型ドキュメント

Base64 画像は HTML ファイルを完全に移植可能にします。Base64 画像を使ったメールテンプレートは、受信者のメールクライアントが外部リソースをブロックしても機能します。同様に、画像を埋め込んだ HTML ドキュメントは、壊れた画像パスを気にすることなく単一のファイルとして共有できます。

パフォーマンス重視のページ

ファーストビューのヒーロー画像や重要な UI 要素では、余分なラウンドトリップを排除することで、Largest Contentful Paint（LCP）などの指標を改善できます。ただし、これは小さな画像にのみ有効です — 大きな画像では、インライン化は逆効果になります。

オフラインでも機能する

画像がデータ URL として埋め込まれている場合、ネットワークアクセスなしで機能します。これはオフライン Web アプリケーションやプログレッシブ Web アプリ（PWA）にとって価値があります。

画像を Base64 に変換する方法

方法 1: オンラインツールを使用する（最も簡単）

画像を Base64 に変換する最も手っ取り早い方法は、専用のオンラインツールを使用することです。画像を無料のオンライン Base64 エンコーダにアップロードするかドラッグ＆ドロップすると、コードに貼り付ける準備ができた完全なデータ URL が得られます。

方法 2: ブラウザで JavaScript を使用する

FileReader API は、ユーザーが選択した画像を Base64 に変換する簡単な方法を提供します:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

方法 3: Canvas API を使用する

Base64 に変換する前に画像のリサイズ、クロップ、圧縮を行う必要がある場合、Canvas API が最適です:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

方法 4: Node.js を使用する

サーバー側では、fs モジュールと Buffer を使用して画像ファイルを Base64 に変換します:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

方法 5: コマンドラインを使用する

Linux と macOS では、組み込みの base64 コマンドを使用できます:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

HTML で Base64 画像を使用する方法

<img> タグに直接:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

CSS で Base64 画像を使用する方法

背景画像として:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

パフォーマンスの考慮事項とベストプラクティス

Base64 画像が役立つ場合

• 10 KB 未満の小さなアイコンと UI 要素
• レンダリングをブロックする重要なファーストビュー画像
• ページ全体で使用されるスプライトと SVG アイコン
• 外部画像がしばしばブロックされるメールテンプレート
• オフラインファーストの Web アプリと自己完結型ドキュメント

Base64 画像が逆効果になる場合

• 大きな写真や高解像度の画像（100 KB 以上）— Base64 のオーバーヘッドと解析の遅延がパフォーマンスを損ないます
• 頻繁に変更される画像 — 大きな HTML ペイロードのブラウザキャッシュを無効化するのは無駄です
• 多くのページで共有される画像 — 外部ファイルは共有ブラウザキャッシュの恩恵を受けます
• CDN 配信画像 — CDN はインライン化されたデータよりも優れたファイル配信を最適化します

10 KB の経験則

広く引用されているガイドライン: 画像が 10 KB 未満の場合は、Base64 としてインライン化することを検討してください。それより大きい場合は、別ファイルとして配信してください。これにより、HTTP リクエストのオーバーヘッドと、HTML 内の Base64 エンコードされたデータのオーバーヘッドのバランスが取れます。

ただし、最適なしきい値は状況によって異なります:

• HTTP/2 マルチプレキシングは複数リクエストのペナルティを軽減し、外部ファイルをより魅力的にします
• 低速な接続では、より大きな画像でもリクエストを排除することが価値があります
• クリティカルレンダリングパスのリソースでは、ラウンドトリップが 1 回減るなら、より大きな画像でもインライン化してください

圧縮に関する考慮事項

JPEG や PNG 画像を Base64 に変換する場合は、代わりに WebP の使用を検討してください。WebP は同じ品質レベルで優れた圧縮を提供し、より小さな Base64 文字列になります。多くのオンラインツールでは、Base64 に変換する前に画像を再エンコードできます。

画像を Base64 に変換する

コードに画像を直接埋め込む準備はできましたか？無料のオンライン Base64 エンコーダとデコーダを使用して画像をアップロードし、HTML、CSS、JavaScript 用の完全なデータ URL を取得しましょう — インストールは不要です。