画像をBase64データURIにブラウザ上で即座に変換。アップロード不要・サーバー送信なし・完全プライベート。

🖼

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

対応形式：PNG・JPG・GIF・SVG・WebP  ·  推奨上限：2 MB
プレビュー

MIMEタイプ
元のサイズ
Base64サイズ
サイズ増加率
Base64文字列（プレフィックスなし） 
<div class="i2b-output-block">
  <div class="i2b-output-header">
    <span class="i2b-output-label">データURI</span>
    <button class="i2b-copy-btn" data-target="i2b-out-uri">コピー</button>
  </div>
  <textarea id="i2b-out-uri" class="i2b-output-textarea" readonly spellcheck="false"></textarea>
</div>

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

<div class="i2b-output-block">
  <div class="i2b-output-header">
    <span class="i2b-output-label">HTML &lt;img&gt; タグ</span>
    <button class="i2b-copy-btn" data-target="i2b-out-html">コピー</button>
  </div>
  <textarea id="i2b-out-html" class="i2b-output-textarea" readonly spellcheck="false"></textarea>
</div>

使い方

  1. 上のエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択します。
  2. ツールはブラウザの FileReader API でファイルをローカル処理します。画像はどのサーバーにも送信されません。
  3. 必要な形式の コピー ボタンをクリックして出力をコピーします。

出力形式の説明

形式用途
Base64文字列API・データベース・JSONペイロード
データURIsrc 属性の値としてそのまま使用
CSS background-imageスタイルシートにそのまま貼り付け
HTML <img> タグHTMLにそのまま貼り付け

Base64エンコードが役立つ場面

画像をBase64データURIとして埋め込むと、外部リクエストなしで完結するHTMLファイルやメールテンプレートを作成できます。CSSの小さなアイコン、APIペイロード、オフライン対応Webアプリにも便利です。ただし、サイズが約 33%増加 し、初期解析がやや遅くなるため、埋め込む画像は小さめ（目安：50 KB以下）に留めることをおすすめします。

プライバシー

すべての変換処理は ブラウザ内 で完結します。画像ファイルがデバイスの外に出ることは一切ありません。

関連ツール： Base64エンコーダー / デコーダー · 画像リサイザー · プレースホルダー画像ジェネレーター

freee で経理・請求書をもっとスムーズに 中小企業・フリーランス向けのクラウド会計ソフト。無料トライアルから始められます。
freee を試してみる