Base64 DataURL 変換

GeekFormat について

純Base64

0文字

純Base64

0文字

データURL出力

0文字

Base64とDataURLを相互変換するオンラインツール。MIMEタイプ自動検出と空白除去に対応します。

Base64 DataURLとは？

DataURLは、データをURLに直接埋め込むURIスキームで、形式は data:[<MIMEタイプ>];base64,<Base64データ> です。画像・PDF・フォントなどの小型リソースを、追加のHTTPリクエストなしでHTML・CSS・JavaScriptに直接インライン化できます。

**純粋なBase64とDataURLの違い：** 純粋なBase64はエンコードされた単なる文字列（例：iVBORw0KGgo...）です。DataURLは data: 接頭辞とMIMEタイプを含む完全なURIであり、src・href・url() などの値として直接使用できます。

**このツールの用途：** 「純粋なBase64文字列」と「完全なDataURL」を相互変換します。既存のBase64に自動的に data: 接頭辞とMIMEタイプを追加したり、DataURLから純粋なBase64部分だけを抽出したりできます。

**典型的な用途：** ① CSS背景画像の埋め込み・② HTML <img> のsrcインライン化・③ Markdown画像のインライン化・④ リッチテキストエディタへの画像貼り付け・⑤ data URI スキームのデバッグ。

ユースケース

既存のBase64に data: 接頭辞とMIMEタイプを追加し、HTMLに直接埋め込み可能なDataURLを取得する
既存のDataURLから純粋なBase64部分だけを抽出し、再構築や転送を容易にする
フロントエンドの data: URIリソースをデバッグする際、Base64のペイロードが完全か確認する
クリップボード内のBase64に対応するMIMEタイプ（PNG/JPEG/PDFなど）を自動検出する
CSSの background-image や HTMLの <img src> に使う data URL を準備する
画像のBase64をMarkdownリッチテキストエディタで貼り付け可能なDataURLに変換する

使い方

方向を選択：「ヘッダー追加」（純粋なBase64 → DataURL）または「ヘッダー削除」（DataURL → 純粋なBase64）。
左側の入力欄に内容を貼り付け：追加モードでは純粋なBase64を、削除モードでは data:... 文字列を貼り付けます。
追加モードでは、「自動検出」のままにするか、MIMEドロップダウンから特定の形式を選択できます。
ツールがリアルタイムで変換し、結果を右側に表示します。コピーまたはtxtとしてダウンロードできます。

特徴

双方向変換：純粋なBase64 ⇔ DataURL
11種類のMIMEタイプ：画像・文書・音声/動画・テキストに対応
MIME自動検出：マジックバイトでPNG/JPEG/GIF/WEBP/PDFを判定
空白除去：改行やスペースなどの不要文字を自動で除去
リアルタイム変換：入力から300msで自動再計算
方向自動切替：切替時に入出力の内容が自動で入れ替わる
ワンクリックコピー：変換結果をクリップボードに直接コピー
txtダウンロード：dataurl-result.txtとして保存
PC/モバイル対応：左右分割はドラッグ可能、モバイルはタブ切替
ブラウザ内処理：コンテンツをサーバーに送信しません

Best Practices

まず自動検出を使用

MIMEタイプが不明な場合はデフォルトの「自動検出」のままにします。検出失敗時のみ手動で選択してください。

サイズ制限に注意

DataURLにはブラウザで2〜4MBの制限があります。大きなファイルは埋め込みではなくURL参照を使用してください。

不要文字の除去

Base64の貼り付けには改行が含まれることがありますが、ツールが自動除去します。不要文字に敏感な場合は先に「Base64クリーン」を使用してください。

比較確認

変換後に「Base64検証」やブラウザ開発者ツールでDataURLが正常に読み込めるか確認してください。

コピー後の確認

ターゲット位置に貼り付けた後、ブラウザのコンソールでデコード結果が期待通りか確認してください。

よくある質問

追加モードはデフォルトで自動検出しますか？

はい。本ツールはデフォルトで自動検出が有効になっており、Base64の先頭バイト（マジックバイト）を調べてPNG・JPEG・GIF・WEBP・PDFのいずれかを判定します。他のMIMEタイプ（application/json、video/mp4など）が必要な場合は、ドロップダウンから手動で選択できます。

既に data: 接頭辞がある入力を入れた場合はどうなりますか？

追加モードでは、入力が既に data: で始まる場合、ツールはそのまま返し、接頭辞を重複して追加しません。削除モードで入力がDataURL形式でない場合、ツールは空白文字を除去した純粋なBase64を返します。

自動検出に失敗した場合はどうなりますか？

Base64がいずれのPNG/JPEG/GIF/WEBP/PDFマジックバイトにも一致しない場合、自動検出は application/octet-stream にフォールバックします。他のMIMEタイプが必要な場合は、手動で選択してください。

どのMIMEタイプに対応していますか？

image/png、image/jpeg、image/gif、image/webp、image/svg+xml、application/pdf、application/json、text/plain、text/html、audio/mpeg、video/mp4 の計11種類の一般的な形式に対応しています。

DataURLはブラウザでサイズ制限がありますか？

はい。ほとんどのブラウザはDataURLの合計長に制限（約2MB〜4MB、ブラウザにより異なる）を設けており、制限を超えるとリソースの読み込みが失敗します。大きなファイルは通常のURLで参照することをお勧めします。

DataURLはどこで使用できますか？

HTMLの <img src>、CSSの url()、<a href> のダウンロード、JavaScriptの fetch、Markdownの画像構文、JSONデータ内の埋め込みリソースなどで使用できます。

Base64内の改行やスペースは自動で除去されますか？

はい。追加モードでは接頭辞を追加する前に改行とスペースを除去します。削除モードでもDataURLから抽出した後に空白文字を除去します。

方向を切り替えると入力はどうなりますか？

方向を切り替えると、現在の出力結果が新しい入力として自動的に設定されるため、連続操作がスムーズに行えます。

コンテンツはサーバーに送信されますか？

いいえ。すべての変換はブラウザ内で完結し、入力と出力はどちらも端末から外に出ることはありません。

用語集

DataURL: RFC 2397で定義されたデータURIスキーム。形式は data:[<mime>];base64,<data>。src・href・url() などの値として直接使用できます。
MIMEタイプ: メディアタイプ識別子。例：image/png、application/pdf。本ツールは11種類の一般的なMIMEタイプに対応し、自動検出も可能です。
マジックバイト: ファイル先頭の固定バイトで、ファイル形式を識別します。本ツールはマジックバイトを検出してPNG/JPEG/GIF/WEBP/PDFなどを識別します。
Base64: 64個の印字可能文字でバイナリデータを表現するエンコード方式。DataURLのペイロード部分はBase64で表現されます。
Data URI Scheme: RFC 2397で定義された data: URIプロトコル。DataURLの正式な仕様名です。