画像をBase64に変換：コードに直接画像を埋め込む

2026年3月31日 · 12分で読めます

画像をBase64形式に変換することは、Web開発のワークフローを劇的に簡素化できる技術の一つです。シングルページアプリケーションの構築、メールテンプレートの作成、トラフィックの多いWebサイトの最適化など、Base64エンコーディングをいつどのように使用するかを理解することで、時間を節約し、サイトのパフォーマンスを向上させることができます。

この包括的なガイドでは、技術的な基礎から実践的な実装戦略まで、画像をBase64に変換することについて知っておくべきすべてを説明します。Base64エンコーディングがいつ意味を持つのか、正しく実装する方法、避けるべき落とし穴について学びます。

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

Base64は、64文字の特定のセットを使用してバイナリデータをASCIIテキスト形式に変換するエンコーディング方式です。「Base64」という名前は、大文字（A-Z）、小文字（a-z）、数字（0-9）、および2つの追加記号（通常は+と/）を含むこの文字セットに由来しています。

Base64は翻訳レイヤーと考えてください。画像ファイルにはバイナリデータ、つまりコンピュータが理解する生の1と0が含まれていますが、テキストベースのシステムを通じて確実に送信することはできません。Base64エンコーディングは、このバイナリデータをHTML、CSS、JSON、または電子メールで安全に埋め込んだり送信したりできるテキスト文字列に変換します。

Base64エンコーディング中に起こることは次のとおりです：

1. バイナリデータは6ビットのグループに分割されます
2. 各6ビットグループは対応するBase64文字に変換されます
3. 必要に応じて、出力長を4の倍数にするためにパディング文字（=）が追加されます
4. 結果は元のバイナリデータより約33%大きいテキスト文字列になります

例えば、小さなPNG画像をBase64エンコードすると次のようになります：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==

data:image/png;base64,プレフィックスは、どのタイプのデータが続くかをブラウザに伝え、長い文字列はBase64形式でエンコードされた実際の画像データです。

画像をBase64に変換する理由

画像をBase64形式に変換することは、Web開発者やデザイナーにとっていくつかの魅力的な利点を提供します。これらの利点を理解することで、プロジェクトでこの技術をいつ使用するかについて情報に基づいた決定を下すことができます。

HTTPリクエストの削減

Webページ上のすべての外部画像は、サーバーへの個別のHTTPリクエストを必要とします。画像をBase64として埋め込むと、HTMLまたはCSSファイルの一部になり、リクエストの総数が減少します。これは、アイコン、ロゴ、UI要素などの小さな画像に特に価値があります。

GoogleのWebパフォーマンスチームの調査によると、HTTPリクエストを減らすことで、平均してページの読み込み時間を15〜30%改善できることが示されています。低速接続やモバイルネットワークを使用しているユーザーにとって、この違いはさらに顕著になります。

デプロイメントの簡素化

Base64エンコードされた画像は、デプロイメント中に個別の画像ファイルを管理する必要がなくなります。すべてがコード内に存在するため、追跡、アップロード、保守するファイルが少なくなります。これは特に次の場合に便利です：

• 自己完結型である必要がある単一ファイルのHTMLドキュメント
• 外部画像がブロックされる可能性のあるメールテンプレート
• ネットワークアクセスに依存できないオフラインアプリケーション
• アセットをコードとバンドルする必要があるコンポーネントライブラリ

キャッシング効率の向上

画像がCSSまたはJavaScriptファイル内にBase64エンコードされている場合、コードと同じキャッシング戦略の恩恵を受けます。CSSファイルが30日間キャッシュされる場合、その中のすべてのBase64画像も同様にキャッシュされます。これにより、より予測可能で管理しやすいキャッシング戦略が作成されます。

インラインSVGの代替を可能にする

SVG画像は直接インライン化できますが、ラスター画像（PNG、JPG、GIF）を埋め込むにはBase64エンコーディングが必要です。これにより、各ユースケースに最適な画像形式を使用しながら、インライン埋め込みの利点を維持する柔軟性が得られます。

セキュリティとプライバシーの強化

Base64エンコードされた画像は他のWebサイトからホットリンクされることができず、帯域幅を保護します。さらに、画像はコードに埋め込まれているため、独立してアクセスまたは操作される可能性のある個別のURLとして公開されません。

画像をBase64に変換する方法

画像をBase64形式に変換する方法は、オンラインツールからコマンドラインユーティリティ、プログラミングライブラリまで複数あります。さまざまなシナリオに最も実用的な方法を見ていきましょう。

オンラインコンバーターの使用

画像をBase64に変換する最も速い方法は、画像をBase64に変換のようなオンラインツールを使用することです。画像をアップロードするだけで、コードですぐに使用できるBase64エンコードされた文字列を即座に受け取ることができます。

オンラインコンバーターは次の場合に最適です：

• コードを書かずにいくつかの画像を素早く変換する
• ワークフローに実装する前にBase64エンコーディングをテストする
• 開発ツールをインストールできないマシンで作業する
• 開発者ではないチームメンバーとエンコードされた画像を共有する

ブラウザでJavaScriptを使用

画像をオンザフライで変換する必要があるWebアプリケーションを構築している場合、JavaScriptはBase64エンコーディングのための組み込みメソッドを提供します：

// 方法1：FileReader APIを使用
function convertImageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用方法
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const base64 = await convertImageToBase64(file);
  console.log(base64);
});

// 方法2：既存の画像要素から
function getBase64FromImage(img) {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL('image/png');
}

Node.jsの使用

サーバーサイドの変換やビルドプロセスの場合、Node.jsはBase64エンコーディングを簡単にします：

const fs = require('fs');

// 画像ファイルをBase64に変換
function imageToBase64(filePath) {
  const image = fs.readFileSync(filePath);
  return Buffer.from(image).toString('base64');
}

// MIMEタイプ付きのデータURIを取得
function imageToDataURI(filePath) {
  const image = fs.readFileSync(filePath);
  const base64 = Buffer.from(image).toString('base64');
  const mimeType = getMimeType(filePath);
  return `data:${mimeType};base64,${base64}`;
}

function getMimeType(filePath) {
  const ext = filePath.split('.').pop().toLowerCase();
  const mimeTypes = {
    'png': 'image/png',
    'jpg': 'image/jpeg',
    'jpeg': 'image/jpeg',
    'gif': 'image/gif',
    'svg': 'image/svg+xml',
    'webp': 'image/webp'
  };
  return mimeTypes[ext] || 'application/octet-stream';
}

// 使用方法
const base64 = imageToBase64('./logo.png');
const dataURI = imageToDataURI('./logo.png');

Pythonの使用

Python開発者は組み込みのbase64モジュールを使用できます：

import base64

def image_to_base64(image_path):
    with open(image_path, "rb") as image_file:
        encoded = base64.b64encode(image_file.read())
        return encoded.decode('utf-8')

def image_to_data_uri(image_path):
    with open(image_path, "rb") as image_file:
        encoded = base64.b64encode(image_file.read()).decode('utf-8')
        mime_type = get_mime_type(image_path)
        return f"data:{mime_type};base64,{encoded}"

def get_mime_type(image_path):
    extension = image_path.split('.')[-1].lower()
    mime_types = {
        'png': 'image/png',
        'jpg': 'image/jpeg',
        'jpeg': 'image/jpeg',
        'gif': 'image/gif',
        'svg': 'image/svg+xml',
        'webp': 'image/webp'
    }
    return mime_types.get(extension, 'application/octet-stream')

# 使用方法
base64_string = image_to_base64('logo.png')
data_uri = image_to_data_uri('logo.png')

コマンドラインツールの使用

ターミナルで素早く変換するには、組み込みのコマンドラインユーティリティを使用できます：

# macOSとLinuxの場合
base64 -i image.png -o output.txt

# または直接パイプ
base64 image.png | pbcopy  # macOSでクリップボードにコピー

# Windows PowerShellの場合
[Convert]::ToBase64String([IO.File]::ReadAllBytes("image.png"))