ツール
画像をここにドロップ
またはファイルを選択してください。処理はこのタブ内で完結し、アップロードされません。だからこそアップロード上限をはるかに超える写真も扱えます。
ファイルを選択画像をdata URLとしてエンコードすることで、スタイルシートやHTMLドキュメント、JSONペイロード内に別途リクエストなしで埋め込むことができます。ラウンドトリップを節約できる小さなアイコンには有効ですが、写真には適していません。Base64はバイト数を3分の1増やし、結果をドキュメントとは別にキャッシュできないためです。
動作のしくみ
- ファイルはブラウザ内で読み取られてエンコードされます。アップロードは一切行われません。
- 出力はデフォルトでは完全なdata: URLですが、オフにすると生のBase64ペイロードになります。
- Base64はファイルサイズを約33%増加させます。これがテキストセーフな文字だけを使用するコストです。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
ポイントを消費した実行は、後から探せるように一行の要約があなた自身の履歴に保存されます。保存されるのは実行の形——サイズ、件数、調べた値——であって、貼り付けた内容ではありません。
必要なポイント
1 回あたり 512.0 KB まではアカウントなしで無料です。それを超える実行は 1 ポイントを消費し、履歴に保存されます。
ポイントは登録、デイリーチェックイン、コメント投稿、プロフィールの記入で貯まります。
ポイントの仕組みを見るよくある質問
- 画像のインライン化が実際に有効なのはどのような場合ですか？
- おおよそ2〜4KB未満の場合です。アイコン、小さなロゴ、背景パターンなどです。それ以下のサイズでは、節約できるラウンドトリップが33%のサイズ増加を上回ります。それ以上になると、ドキュメントを大きくし、キャッシュ不可にしてしまう一方で、HTTP/2が多重化してくれるはずの1リクエストを節約するだけになります。
- 結果をCSSで使うにはどうすればよいですか？
- background-image: url("data:image/png;base64,…") のように、プレフィックスを含むdata: URL全体を指定します。HTMLでは、imgタグのsrc属性に直接指定します。
- data URLがこんなに長いのはなぜですか？
- ファイル全体がテキストとしてレンダリングされ、さらに3分の1が追加されるからです。40KBのPNGは約54KBの文字になります。これは正常であり、小さな画像のみをインライン化する理由でもあります。
背後にあるオープンソース
このツールは外部ライブラリを同梱しない独自実装です。dankogai/js-base64（BSD-3-Clause）はコードとして同じ仕事をします。自分のプログラムで同じことをしたいなら、Web ページを呼ぶのではなくそちらから始めてください。
dankogai/js-base64別の呼び方
- 画像 base64 変換
- base64 エンコード 画像
- data URL 生成
- png base64 変換
- img base64 エンコード