Data URIジェネレーターとは？

Data URIジェネレーターは、ファイルをbase64エンコードしたData URIに変換し、HTML・CSS・JavaScriptに直接埋め込めます。アイコンやフォントなど小さなアセットのHTTPリクエスト数を削減できます。

最大 20 MB のファイルをドロップすると、MIME タイプを自動判定し、バイト列を base64 でエンコードして、すぐ貼れる 3 つのスニペットを出力します。生の data URI、CSS の background-image ルール、HTML の img タグです。画像はライブプレビュー付きなので、本番投入前に空白や破損出力に気付けます。テキストを貼り付けて SVG や JSON 文字列をエンコードしたり、エンコード前に大きな画像を縮小して URI を小さく保ったり、MIME タイプの判定が誤っていたら修正したり、複数のファイルをまとめてエンコードしたり、リモートファイルを URL から直接取得したり、デコードモードに切り替えて data URI を貼り付け元のファイルを取り戻すこともできます。

使い方

1. ピッカーでファイルをアップロードするか、テキストモードに切り替えて文字列（SVG・JSON・CSS）を貼り付けてエンコードします。
2. ファイルがbase64にエンコードされ、正しいMIMEタイプを含む完全なData URIが生成されます。
3. Data URIをコピーして、imgタグのsrc属性、CSSのbackground-image、JavaScriptコードに使用できます。

使用するタイミング

• 資産をホストしない単一 HTML デモに、小さなロゴやアイコンを埋め込む。
• リモート読み込みがブロックされても表示されるよう、メールに画像をインラインで埋め込む。
• レンダリングを阻むリクエストを 1 つ減らすため、フォントや SVG を CSS に直接貼る。

結果

2KBのfavicon.pngをData URIに変換してHTMLに直接貼り付ければ、ページ読み込みごとにネットワークリクエストが1つ減ります。

よくある質問

エンコード後の data URI が元ファイルより約 33 % 大きいのはなぜ?

Base64 はバイナリ 3 バイトを ASCII 4 文字で表現するので 33 % 増えます。HTTP レスポンスで gzip を有効にすればほぼ取り戻せますが、ディスク上の HTML や CSS ファイル自体は元アセットより大きくなります。

data URI の実用的なサイズ上限は?

インライン用途では未エンコードで約 10 KB が目安です。それ以上でも解析はできますが、キャッシュの恩恵が消え(ページごとに再解析)、HTML や CSS の編集も重くなります。大きめのアセットは通常通りホストしてください。

data URI を CSS の背景画像として使えますか?

使えます。ツールが完成形の CSS ルールを返すので、URI を url() に包んで background-image に書くだけです。初回描画時にブラウザがデコードし、小さなアイコンならインラインのまま、初期表示を遅らせるネットワーク要求を 1 つ減らせます。

ブラウザは data URI を通常の画像のようにキャッシュしますか?

しません。data URI は親ドキュメントの一部なので、ドキュメントがキャッシュされるときだけ一緒にキャッシュされます。同じ画像を 20 ページから参照すると 20 回再解析されるため、複数ページ共有のアセットは普通の URL のほうが結果的に速いです。

HTML メールで data URI は動きますか?

Gmail と Apple Mail は表示します。Outlook(Windows デスクトップ版)は削除します。広い互換性が必要なら、HTML 内に data URI を入れる代わりに CID 参照の添付として画像を付ける方が確実です。

関連ツール