画像→Base64・Data URL変換
小さなアイコンやロゴを HTML や CSS に直接埋め込みたいとき、メールの署名画像を Data URL にしたいとき、受け取った Data URL の中身を確かめたいときに。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
画像 → Data URL / Base64
ここに画像ファイルをドラッグ&ドロップ(複数可)
PNG、JPEG、GIF、WebP、SVG、AVIF、ICO など。ファイルはブラウザの外へ送られません。
Data URL → 画像(逆変換)
使い方
- 画像ファイルを点線の枠にドラッグ&ドロップするか、「ファイルを選ぶ」で選びます。複数まとめて選べます。
- ファイルごとに Data URL、Base64 だけの文字列、img タグ、CSS の background 用のスニペットが表示されます。「コピー」で取り出せます。
- 元のサイズと Base64 後のサイズが並んで表示されます。大きい場合は注意が出ます。
- Data URL から画像に戻したいときは、下の欄に貼り付けて「画像に戻す」を押します。プレビューと種類・サイズを確認し、ファイルとしてダウンロードできます。
変換の決まり
| 項目 | 扱い |
|---|---|
| MIME タイプ | ブラウザが判定した種類を使い、判定できない場合は拡張子から補います |
| Base64 のサイズ | 元のバイト数 × 4 ÷ 3 を 4 の倍数に切り上げた値(約 1.37 倍) |
| SVG | Base64 版に加えて、data:image/svg+xml, + URL エンコードの版も出力します。こちらの方が短く済みます |
| img タグ | width と height を実寸で入れます。alt は空なので内容に応じて書いてください |
| CSS | クラス名はファイル名から作ります(「ファイル名を使わない」で .image) |
| 逆変換 | data: から始まる文字列はそのまま、Base64 だけの場合は先頭のバイト列から PNG / JPEG / GIF / WebP / SVG を推定します |
| 上限 | 1 ファイル 20MB まで |
どのくらいまでインライン化してよいか
Data URL にした画像は HTML や CSS の一部になるため、別ファイルとしてキャッシュされず、ページを開くたびにダウンロードされます。Base64 で約 1.37 倍に増える点も不利です。一方で、小さな画像は別リクエストにする往復の方が時間がかかることがあります。
- 数 KB 以下のアイコンや SVG のロゴ: インライン化に向いています。
- 10KB〜50KB: 1 か所でしか使わず初回表示に必要なら検討の余地があります。複数ページで使うなら別ファイルの方が有利です。
- 50KB 以上や写真: ファイルのまま参照してください。HTML が重くなり、表示開始が遅れます。
HTML メールでは Data URL の画像を表示しないメールソフトが多いため、外部 URL か添付(CID 参照)にしてください。
注意
- ファイルはブラウザの中だけで処理し、アップロードしません。
- 大きな画像を Data URL にして貼ると、ページの読み込みが遅くなります。サイズの表示を確認してから使ってください。
よくある質問
どのくらいのサイズまで Data URL にしてよいですか?
目安は数 KB、大きくても 10KB 程度までです。Base64 にするとサイズが約 1.37 倍になり、HTML や CSS に埋め込むとその分だけ毎回ダウンロードされ、ブラウザのキャッシュも効きにくくなります。小さなアイコンや SVG のように、別リクエストにする方がかえって遅くなるものに向いています。写真のような大きな画像はファイルのまま参照してください。
Base64 と Data URL は何が違いますか?
Base64 は、バイナリを英数字と記号 64 種類の文字列にする符号化方式です。Data URL は data:image/png;base64, のように先頭に種類(MIME タイプ)と符号化方式を付けて、URL として使える形にしたものです。img タグの src や CSS の url() には Data URL を使います。
SVG は Base64 にしない方がよいと聞きました。
SVG はテキストなので、Base64 にせず data:image/svg+xml, に続けて URL エンコードした SVG を書く方が短くなります。本ツールでは SVG を選んだときに、Base64 版に加えて URL エンコード版も出力します。
変換した画像はどこかに送られますか?
送られません。ファイルの読み取りと変換はすべてお使いのブラウザの中で行い、サーバーへのアップロードはしません。ページを閉じると結果は消えます。