画像→Base64変換 — data URL オンライン
画像を Base64 テキスト、または HTML／CSS／Markdown／文字列しか受けない設定向けの完全な `data:image/...;base64,` data URL にします。小さなアイコンやサムネ向き — 数 MB の写真を埋め込むとページが膨らみ読み込みが遅くなります。
ここにファイルをドロップ、またはクリックして選択
Base64 はバイナリを読み取り可能な文字にします。data URL なら追加の HTTP リクエストなしで画像を載せられますが、文字列はファイルより約三分の一大きく、キャッシュも効きにくいです。
キロバイト級のアイコン、ピクセルアート、小さなロゴ向け。旅行写真を CSS に突っ込むとスタイルシートが巨大になります。
元が大きいなら先に圧縮またはリサイズ — 符号化後の文字列も短くなります。
変換の手順
- 画像を選びプレビューを確認
- 必要に応じて data URL プレフィックスを切替
- 出力テキストをコピー
- HTML／CSS／設定に貼り付け
画像を Base64 にするとき
- 単一ファイルのデモやメール HTML にインラインアイコンが要る。
- 追加のアセットなしでごく小さな CSS 背景。
- 画像をテキスト欄だけで受け取る API や設定。
- data URL プレフィックスを選べ、そのままコピペできる。
シナリオ
- コンポーネントドキュメントに 16×16 アイコンを埋め込む
- メールテンプレートの小さなバッジ（合計サイズに注意）
- Base64 画像データを期待するフォーム欄
ヒント
- CSS の `url()` には data URL プレフィックスをオン。
- 相手が生の Base64 だけ欲しいときはプレフィックスをオフ。
- 文字列が長すぎるなら先に圧縮／リサイズ。
- ファイルに戻すなら Base64→画像。
出力の形
| 入力 | 出力 | 備考 |
|---|---|---|
| 小さな PNG アイコン | data:image/png;base64,... | プレフィックス付き |
| 同じ画像 | 生の Base64 文字列 | プレフィックスオフ |
画像→Base64 FAQ
- どの画像形式が使える？
- ブラウザが画像として読める一般的な形式：PNG、JPG、WebP、GIF など。
- なぜファイルより「長い」？
- Base64 符号化はサイズが膨らみます — 正常で、エラーではありません。
- フォルダごと一括は？
- ここでは一枚ずつ。プレビューで確認しやすくするためです。
- 大きな写真向き？
- いいえ — 大きな画像は通常の URL でホストし、Base64 は小さな資産用に。