任意のファイルをBase64データURLに変換、またはデータURLから元のファイルを復元。すべてブラウザ内で完結し、サーバー送信なし・完全プライベート。

📁

ファイルをここにドラッグ＆ドロップ、またはクリックして選択

画像・SVG・フォント・JSON・PDF・音声・動画など、あらゆるファイルに対応
ファイル名 —
MIMEタイプ —
元のサイズ —
変換後サイズ —
サイズ増加 —
<div id="du-preview-wrap">
  <img id="du-preview-img" src="" alt="プレビュー">
  <div id="du-preview-label">画像プレビュー</div>
</div>

<div class="du-output-block">
  <div class="du-output-header">
    <span class="du-output-title">データURL（data:mime;base64,...）</span>
    <button class="du-copy-btn" data-target="du-out-dataurl">コピー</button>
  </div>
  <textarea id="du-out-dataurl" readonly spellcheck="false" placeholder="データURLがここに表示されます..."></textarea>
</div>

<div class="du-output-block">
  <div class="du-output-header">
    <span class="du-output-title">Base64文字列のみ</span>
    <button class="du-copy-btn" data-target="du-out-b64">コピー</button>
  </div>
  <textarea id="du-out-b64" readonly spellcheck="false" placeholder="Base64文字列がここに表示されます..."></textarea>
</div>

<div class="du-output-block">
  <div class="du-output-header">
    <span class="du-output-title">CSS background-image</span>
    <button class="du-copy-btn" data-target="du-out-css">コピー</button>
  </div>
  <textarea id="du-out-css" readonly spellcheck="false" rows="2"></textarea>
</div>

<div class="du-output-block" id="du-img-src-block" style="display:none">
  <div class="du-output-header">
    <span class="du-output-title">HTML &lt;img&gt; src</span>
    <button class="du-copy-btn" data-target="du-out-html">コピー</button>
  </div>
  <textarea id="du-out-html" readonly spellcheck="false" rows="2"></textarea>
</div>

<div class="du-output-block" id="du-font-block" style="display:none">
  <div class="du-output-header">
    <span class="du-output-title">CSS @font-face src</span>
    <button class="du-copy-btn" data-target="du-out-font">コピー</button>
  </div>
  <textarea id="du-out-font" readonly spellcheck="false" rows="3"></textarea>
</div>

<div id="du-enc-actions">
  <button class="du-btn-secondary" id="du-reset-btn">別のファイルを変換</button>
</div>
検出されたMIME —
デコード後サイズ —
デコードされた画像プレビュー
デコードされた画像プレビュー
ファイルをダウンロード

主な用途

  • CSS background-image
  • HTML img src
  • フォント埋め込み（@font-face）
  • SVG埋め込み
  • メールテンプレート
  • JSON / APIペイロード
  • オフラインWebアプリ
  • ファビコン埋め込み

使い方

ファイル → データURL

  1. 変換したいファイルをドロップゾーンにドラッグ＆ドロップ、またはクリックしてファイルを選択します。
  2. ブラウザの FileReader API を使ってローカルで処理されます。ファイルはサーバーに送信されません。
  3. 必要な形式をコピーボタンでコピーします：データURL全体・Base64文字列・CSS background-image・HTML <img> タグ・CSS @font-face（フォントファイルの場合）。

データURL → ファイル

  1. データURL → ファイル タブに切り替えます。
  2. data:mime;base64,... 形式の文字列（またはBase64文字列のみ）を貼り付けます。
  3. デコードしてダウンロード をクリックして元のファイルを保存します。

出力形式の説明

形式用途
データURLsrc・href・url() の直接値として使用
Base64文字列API・データベース・JSONペイロード
CSS background-imageスタイルシートにそのまま貼り付け
HTML <img> タグHTMLにそのまま貼り付け
CSS @font-face外部リクエストなしでWebフォントを埋め込み

データURLを使う理由

ファイルをBase64データURIとして埋め込むことで、外部HTTPリクエストなしに自己完結したHTMLファイル・メールテンプレート・CSSスタイルシートを作成できます。主な用途：

  • CSSのSVGアイコン — 追加のネットワーク通信なし
  • メール内フォント — 一部クライアントは外部リソースをブロックするため
  • オフラインWebアプリ — アプリシェルにアセットを直接埋め込み
  • APIペイロード — バイナリデータをJSON文字列として渡す
  • ファビコン埋め込み — 別ファイルなしで小さなアイコンをインライン化

変換後のサイズは約33%増加します（3バイトが4文字のBase64になるため）。本番環境では50KB以下のアセットに使用することをお勧めします。

プライバシー

すべての変換はブラウザの FileReader および atob/btoa API を使ってブラウザ内で完結します。ファイルデータがサーバーに送信されることはありません。

関連ツール

Base64エンコード・デコードを行う → Base64エンコーダー

画像をBase64に変換する → 画像→Base64変換ツール

Base64から画像を復元する → Base64→画像変換ツール

ファイル管理・経費処理をもっとスマートに

データURLを活用してWebサイトやシステムを効率化するように、日々の会計・確定申告もクラウドで効率化しませんか？

freee会計を無料で試す