画像Base64変換ツール - オンラインエンコード&デコード

画像をBase64文字列に変換、またはBase64を画像にデコードします。PNG、JPG、SVG、GIF、WebPに対応。100%クライアントサイド処理。

入力

画像をドラッグ＆ドロップまたはクリックして選択

PNG、JPG、SVG、GIF、WebP対応（最大10MB）

出力

画像は完全にブラウザ内で処理されます。ファイルはサーバーにアップロードされません。

よくある質問

画像のBase64エンコードとは何ですか？なぜ使用するのですか？

画像のBase64エンコードは、バイナリ画像データをBase64アルファベット（A-Z、a-z、0-9、+、/）を使用してテキスト文字列に変換します。結果の文字列はData URI（data:image/png;base64,...）としてHTML、CSS、JavaScriptに直接埋め込むことができます。これにより各画像の個別のHTTPリクエストが不要になり、アイコン、ロゴ、UI要素などの小さな画像に特に有効です。外部画像の読み込みがブロックされることが多いメールテンプレートでも必須です。

この画像Base64ツールはどのように使用しますか？

エンコードする場合：「エンコード」モードを選択し、アップロードエリアに画像をドラッグ＆ドロップするか、クリックして選択します。ツールが即座にBase64文字列を生成します。お好みの出力形式（Raw Base64、Data URI、HTML <img>、CSS Background）を選択し、コピーボタンをクリックします。デコードする場合：「デコード」モードを選択し、入力エリアにBase64文字列またはData URIを貼り付けます。ツールが自動的にデコードして画像プレビューを表示します。

画像データは安全ですか？サーバーにアップロードされますか？

画像は100%安全で、ブラウザから出ることはありません。すべてのエンコードとデコードは、ブラウザのネイティブFileReader APIとatob()/btoa()関数を使用してクライアント側で実行されます。画像データ、Base64文字列、その他の情報はサーバーに送信されません。ブラウザのネットワークタブで確認できます。

どの画像形式がサポートされていますか？

このツールは最も一般的な5つのWeb画像形式をサポートしています：PNG、JPEG（JPG）、SVG、GIF、WebP。各形式はMIMEタイプで自動検出され、適切なData URIプレフィックスで正確にエンコードされます。XMLベースのSVGファイルは特にうまくエンコードされ、Base64形式でもベクター品質を維持します。アニメーションGIFはBase64エンコード時にもアニメーションが保持されます。

Base64エンコードのサイズオーバーヘッドはどのくらいですか？

Base64エンコードはデータサイズを約33%増加させます。Base64はバイナリデータの3バイトごとに4つのASCII文字に変換するためです。例えば、30KBのアイコンはBase64文字列として約40KBになります。これにより、HTTPリクエストの削除がサイズ増加を上回る小さな画像（10-20KB未満）にBase64埋め込みが最適です。

Raw Base64とData URIの違いは何ですか？

Raw Base64は単純なエンコード文字列です（例：iVBORw0KGgoAAAA...）。Data URIはこれをMIMEタイププレフィックスでラップします：data:image/png;base64,iVBORw0KGgoAAAA... HTML <img src>、CSS background-image: url(...)、またはブラウザの<link>タグに画像を埋め込む場合はData URI形式が必要です。Raw Base64はAPIペイロード、データベースストレージ、カスタム処理のためにエンコードデータだけが必要な場合に便利です。

Base64画像と通常の画像ファイルはいつ使い分けるべきですか？

Base64埋め込みを使用：小さなアイコンとロゴ（10-20KB未満）、単一ファイルHTMLページ、メールテンプレート、CSSスプライトの代替。通常の画像ファイルを使用：大きな写真、ブラウザキャッシュの恩恵を受ける画像、複数ページで共有される画像、33%のサイズオーバーヘッドが重要になる50KB以上の画像。一般的なルール：HTTPリクエストのオーバーヘッドがBase64サイズのオーバーヘッドより大きい場合、Base64を使用してください。

Data URIプレフィックスのないBase64文字列をデコードできますか？

はい。data:image/...;base64,プレフィックスなしの生のBase64文字列を貼り付けた場合、ツールはデフォルト形式（PNG）を想定してデコードを試みます。最良の結果を得るには、完全なData URIプレフィックスを含めて、ツールが画像タイプを正確に検出し、ダウンロード時に適切なファイル拡張子を設定できるようにしてください。

コード例

// === Image to Base64 Encoding (Browser) ===

// Encode image file to Base64 Data URI
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);
  });
}

// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
  const commaIndex = dataUri.indexOf(',');
  return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}

// Format output for different use cases
function formatBase64Output(dataUri, format) {
  switch (format) {
    case 'raw': return extractRawBase64(dataUri);
    case 'html': return `<img src="${dataUri}" alt="" />`;
    case 'css': return `background-image: url(${dataUri});`;
    default: return dataUri;
  }
}

// === Base64 to Image Decoding ===

function base64ToBlob(base64Input) {
  let dataUri = base64Input.trim();
  if (!dataUri.startsWith('data:')) {
    dataUri = `data:image/png;base64,${dataUri}`;
  }
  const [header, data] = dataUri.split(',');
  const mimeMatch = header.match(/data:(.*?);/);
  const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
  const byteString = atob(data);
  const byteArray = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    byteArray[i] = byteString.charCodeAt(i);
  }
  return new Blob([byteArray], { type: mimeType });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataUri = await imageToBase64(file);
  console.log('HTML:', formatBase64Output(dataUri, 'html'));
});