使い方
- 画像を選択するか、ここにドロップするか、Ctrl+V で貼り付けます。
- 出力を選びます。Data URI、Base64 のみ、CSS background、HTML <img>、Markdown から選べます。
- 結果をコピーします。
- 逆に変換するには、「Base64 から画像へ」の欄に data URI または Base64 文字列を貼り付けます。
オプションの説明
- Data URI
- data:image/png;base64,… の形の完全な文字列で、URL を指定できる場所ならどこでも使えます。
- Base64 のみ
- data:…; の接頭辞を除いた、エンコード済みのデータだけです。生の Base64 を受け取る API や JSON フィールド向けです。
例
| 出力 | 結果 |
|---|---|
| Data URI | data:image/png;base64,iVBORw0KGgo… |
| CSS | background-image: url("data:image/png;base64,…"); |
| HTML | <img src="data:image/png;base64,…" alt=""> |
よくある質問
Base64 にすると画像はどれくらい大きくなりますか？
約 3 分の 1 増えます。Base64 は 3 バイトごとに 4 文字を使うため、30 KB の画像はおよそ 40 KB のテキストになります。
画像を Base64 でインライン化すべきなのはどんなときですか？
数 KB 以下の小さなアイコンや画像なら、インライン化するとネットワークリクエストを 1 回減らせます。大きな画像は別ファイルにしたほうが、キャッシュでき HTML や CSS も肥大化しないので適しています。
対応している形式は？
ブラウザで読み込める画像ならすべて対応しています（PNG、JPEG、GIF、WebP、SVG、AVIF、ICO など）。デコード時に MIME タイプがない場合は、データそのものから形式を判別します。
画像はアップロードされますか？
いいえ。エンコードもデコードもブラウザ内で行われます。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。