任意のファイルを Base64 に変換

機能

• 任意のファイル（種類不問）をドロップするだけ。Base64 と完全な data URL を出力
• 先頭に data URL を表示し、コピーボタン1つ —— src・url()・JSON にそのまま貼れます
• ファイル名・元のサイズ・エンコード後のサイズ・MIME・実際の長さを表示
• MIME が空のときは application/octet-stream として扱い、推測しません
• Base64 の代償（3割増・独立キャッシュを失う）も明記します。結果だけを出しません
• 送信は一切なし。オフラインでも使えます

使い方

1. ファイルを点線の枠にドラッグします
2. 上部に data URL が出るので、右のボタンでコピーします
3. 下の表でサイズ・MIME・エンコード後の長さを確認します
4. `src`・`url()`・data フィールドに貼り付けます

よくある質問

Base64 と data URL は何が違いますか？

Base64 はエンコードされたテキストそのもので、data URL は種類の情報を伴った完全なアドレスです：`data:image/png;base64,` に続けてそのテキスト。`src` や `url()` に貼るのに必要なのは後者で、Base64 だけではブラウザが何のデータか分かりません。このツールは両方を出し、先頭にすぐ使える data URL を置いています。

画像を何でも Base64 で埋め込むのが良くないのはなぜですか？

代償は3つ。サイズ：Base64 は元より約 3 割大きくなります（3 バイトが 4 文字に）。キャッシュ：埋め込んだ資源は HTML / CSS と一緒に移動するため、1文字変えるだけで塊ごと再取得になり、独立したファイルなら個別にキャッシュできます。並列性：ブラウザがその資源を並列で取りに行けなくなります。目安は「数 KB 以内、かつ実際に使うもの」—— 小さなアイコン、1×1 のプレースホルダー、数百バイトのフォント。大きなファイルは通常どおり参照してください。

CSS に埋め込めるフォントはどのくらいの大きさまでですか？

フォントは埋め込みに最も向いた種類です：文字の描画を妨げるため、リクエストが1回増えるごとに空白期間（FOIT）が延びます。ただし日本語や中国語のフォントは数 MB になることもあり、それは全体ではなくサブセット（実際に使う字形だけ）を埋め込む場面です。欧文フォントは通常 10〜30 KB で、埋め込みは一般的です。CJK では埋め込み以上にサブセット化が重要です。

なぜ 4 MB の上限があるのですか？

Base64 の出力がテキストで、表示とコピーのために DOM に入るからです。4 MB のファイルは 5.5 MB の文字列になり、それだけのテキストの描画はブラウザに大きな負担です。ハッシュツールが 512 MB まで扱えるのは、出力が常に固定長の要約だからです —— 読む量と出力の長さは無関係です。それ以上は `base64 -w0 入力 > 出力.txt` を使ってください。