§

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

PNG・JPEG・GIF・WebP・SVG・BMP — 最大 30 MB。1 枚ずつ。

画像はお使いのデバイス上で完全に読み込まれ、エンコードされます — ブラウザの外に出ることはありません。

日本の開発現場では、電子帳票や請求書 PDF のヘッダーに企業ロゴを data URI で埋め込む実装がよく見られます。インボイス制度（適格請求書等保存方式）に対応した会計システムでは、PDF 内の画像リソースを外部参照せず自己完結させることで、受信者環境に依存しない表示を保証できます。また NISC・CRYPTREC のガイドラインに沿い、証跡となるスクリーンショットや内部資料の画像を外部サーバーに送信させたくない場合にも、このブラウザ完結型ツールは適しています。Vite や webpack の資産インライン設定を調整する際には、このツールで実際の出力を事前確認できます。

// 関連ツール

./base64-encoder
Base64 エンコーダー
テキストやファイルを Base64 形式にエンコードします。
→
./image-format-converter
画像フォーマット変換器
PNG・JPEG・WebP をローカルで変換 — アップロード不要、バッチ処理対応。
→
./image-compressor
画像圧縮ツール
JPEG・PNG・WebP 画像をローカルで圧縮 — 品質指定または目標サイズ指定、アップロード不要。
→
./
すべてのツール
Ultim8Soft のオンラインツール一覧をご覧ください。
→

画像→Base64 変換の仕組み

変換処理はすべてブラウザ上で、File API と組み込みの btoa 関数を使って完結します — コーデックライブラリのダウンロードは不要で、サーバーが画像を受け取ることはありません。処理のパイプラインは次のとおりです：

  1. 画像をドロップまたは選択します。ブラウザはローカルディスクから Blob として読み込み、バイトをサーバーにコピーしません。
  2. ファイルは 1 MB のチャンクで読み込まれ、各チャンクのバイトがバイナリ文字列に追加されます。チャンク分割によって、大きな画像で JavaScript コールスタックがオーバーフローすることを防ぎます。
  3. バイナリ文字列を btoa に渡します。btoa は 3 バイトごとに A–Z・a–z・0–9・+・/ のアルファベットから 4 つの Base64 文字にマッピングします。
  4. File オブジェクトからファイルの MIME タイプ（image/png・image/jpeg など）を読み込み、data: プレフィックスとして先頭に付加して、完全な data:image/…;base64,… URI を生成します。
  5. ページはその URI から 4 種類の出力を組み立てます — 完全な data URI・プレフィックスなしの生 Base64・貼り付けてすぐ使える タグ・CSS background-image スニペット — それぞれにコピーボタンが付いています。

画像を data URI としてエンコードする理由

  • 小さなロゴやアイコンを data URI としてインライン化すると、個別のネットワーク往復が不要になり、ページやメールの最初のフレームの描画が少し早くなります。
  • 画像がインライン化されたページやスタイルシートは自己完結型になり、オフラインでも動作し、アセットフォルダを持ち歩かずにコピーできます。
  • 多くのメールクライアントはリンクされたリモート画像をデフォルトでブロックします。ロゴを Base64 としてインライン化すると、メールを開いた瞬間に表示され、リモート取得は不要です。
  • エンコードはブラウザ上で完全に行われるため、機密性の高い画像がサードパーティのサーバーに送信されることはありません。スクリーンショット、証明書のスキャン、内部設計図に適しています。

Base64 画像の主な活用シーン

data URI は、画像が十分に小さく、個別リクエストのコストが Base64 による約 33% のサイズ増加を上回る場合に使われます。よく見られるパターンが 3 つあります：

  • CSS インラインアイコン：1–2 KB のアイコンをスタイルシートに background-image: url(data:…) として埋め込み、ルールを完全に自己完結させる。
  • メール署名とニュースレター：data URI src を持つ としてロゴを埋め込み、クライアントがリモート画像をブロックしていても表示できるようにする。
  • ビルドツールのインライン化：Webpack や Vite などのバンドラーはバイトしきい値以下のアセットを自動的にインライン化しますが、このツールを使えばその出力を実際に確認できます。

Base64 画像はどのようなものですか？

1×1 の透明な PNG を例にとります。元のバイト数はわずか 67 バイトですが、エンコードすると iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= という文字列になり、完全な data URI は data:image/png;base64,iVBORw0KGgo… になります。エンコード後の形式は元のサイズより約 3 分の 1 大きくなります。これがバイナリデータをテキストに安全に埋め込むためのトレードオフです。

画像はどこかにアップロードされますか？

いいえ。変換にはブラウザの File API とネイティブの btoa 関数を使用しており、画像はお使いのデバイス上で完全にエンコードされます。ご自身で確認するには：ブラウザのデベロッパーツールを開き、ネットワークパネルに切り替えて、画像を変換してみてください — 表示されるリクエストはページの読み込みと広告に関するものだけです。画像に関するデータはサーバーに送信されないため、スクリーンショット・証明書・内部設計図を扱っても安全です。

なぜ Base64 の出力は元の画像より大きいのですか？

Base64 はバイナリデータの 3 バイトを 4 つの ASCII 文字で表すため、エンコード後のテキストはソースファイルより約 33% 大きくなります。このページの data URI サイズ表示で正確な増加量を確認できます。そのため、data URI は小さな画像に対してのみ有効です — 2 MB の写真をインライン化すると、HTML や CSS のサイズが個別リクエストのコストをはるかに上回ります。目安として、4 KB 以下の画像はインライン、それ以上はリンク参照が推奨されます。

変換できる画像形式は何ですか？

このツールは画像をデコードせず生のバイトを読み込むため、ブラウザが画像として認識できるあらゆる形式が使えます。PNG・JPEG・GIF・WebP・SVG・BMP に対応しています。MIME タイプはファイルから直接読み込まれるため、data: プレフィックスは常に実際の形式と一致します — JPEG は data:image/jpeg、SVG は data:image/svg+xml を生成します。SVG についての補足：SVG はすでにテキスト形式のため、SVG では URL エンコードされた data URI のほうが Base64 より小さくなることが多いですが、このツールは一貫性のために Base64 形式で出力します。

画像をドロップし、必要な data URI またはスニペットをコピーして、HTML・CSS・メールテンプレートに貼り付けるだけです。すべてのバイトはお使いのデバイス上に留まります。アップロード不要、アカウント不要、サーバーへの往復なし。