encode / image

画像 → Base64変換

画像ファイルをBase64エンコードし、Data URI形式またはBase64文字列として取得できます。 PNG・JPEG・WebP・GIF・SVG・BMPに対応。入力データはサーバーに送信されません。

画像をドラッグ＆ドロップ、またはクリックして選択
PNG / JPEG / GIF / WebP / SVG / BMP

使い方

01
  1. ドロップゾーンに画像ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択します
  2. ファイル情報（ファイル名・サイズ・MIMEタイプ・Base64後の推定サイズ）とプレビューが表示されます
  3. 出力形式を選択します：Data URI形式（HTMLのsrc属性に直接貼り付け可能）またはBase64のみ
  4. 「コピー」ボタンで出力結果をクリップボードにコピーします
  5. 「クリア」ボタンでリセットして別の画像を変換できます

実装コード

02

ブラウザ標準の FileReader APIを使って画像をBase64に変換しています。 外部ライブラリは一切不要で、そのままコピーしてご利用いただけます。

/** Data URI形式にフォーマットする */
export function formatDataUri(mimeType: string, base64Data: string): string {
  return `data:${mimeType};base64,${base64Data}`
}

/** Base64文字列から元のサイズを推定する（KB単位） */
export function estimateSizeKb(base64: string): number {
  // Base64は元データの約4/3倍のサイズ
  return Math.round((base64.length * 3) / 4 / 1024 * 10) / 10
}

/** Data URIからMIMEタイプとBase64を分離する */
export function extractBase64FromDataUri(
  dataUri: string
): { mimeType: string; base64: string } | null {
  const match = dataUri.match(/^data:([^;]+);base64,(.+)$/)
  if (!match) return null
  return { mimeType: match[1], base64: match[2] }
}

// FileReader APIで画像をData URIに変換する
function readImageAsDataUri(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (e) => resolve(e.target?.result as string)
    reader.onerror = () => reject(new Error('読み込み失敗'))
    reader.readAsDataURL(file)
  })
}

よくある使用例・注意点

03
HTMLのimgタグに直接埋め込む
Data URI形式をコピーして img src 属性に直接貼り付けると、外部ファイルなしで画像を埋め込めます。メールHTMLやSVGへのインライン画像埋め込みにも使えます。
CSSの背景画像に使う
background-image: url('data:image/png;base64,...') の形式でCSSに埋め込めます。小さなアイコンやパターン画像をHTTPリクエストなしで使いたい場合に便利です。
APIへの画像送信
画像をBase64に変換してJSON本文に含めることで、マルチパートフォームデータを使わずにREST APIへ画像データを送信できます。特にAIサービス（Vision API等）との連携でよく使われるパターンです。
ファイルサイズに注意
Base64エンコードすると元の画像より約33%サイズが増加します（3バイト→4文字の変換のため）。大きな画像をData URIとしてHTMLやCSSに埋め込むと、ページの初期ロードが遅くなる場合があります。100KB以上の画像は通常の外部ファイルとして配信することを推奨します。
プライバシーについて
選択した画像はブラウザ内のみで処理されます。サーバーには一切送信されないため、機密性の高い画像も安全に変換できます。

関連ツール

04
Base64エンコード/デコードハッシュ生成URLエンコード/デコード

ソースコード

05

このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →