無料開発者ツール

Data URI ジェネレーター HTML と CSS にアセットを埋め込む

フロントエンド開発者向けの無料 Data URI ジェネレーター。PNG、JPEG、SVG、フォント、テキストから Base64 または URL エンコードの Data URI を作り、HTML img src や CSS background-image に使えます。

Data URI ジェネレーターを開くすべてのツールを見る

Data URI ジェネレーターが解決する課題

正しい MIME、エンコード、スニペットで小さなフロントエンド資産を埋め込めます。

小さな資産をすばやく埋め込み

アイコン、SVG、短いテキストをそのままページに含められます。

開く

MIME のミスを防ぐ

コピー前に MIME タイプを確認、編集できます。

使い方を見る

非公開資産をローカルに保持

ファイルはブラウザー内で読まれ、サーバーへ送信されません。

開く

Data URI ジェネレーターの機能

アップロード、貼り付け、Base64、URL エンコード、プレビュー、コピーを一つの画面で行えます。

ファイルまたはテキスト

PNG、JPEG、WebP、SVG、テキスト、JSON、CSS、WOFF、WOFF2 に対応。

自動選択

SVG とテキストは URL、バイナリは Base64。

MIME 編集

必要に応じて MIME を上書きできます。

3 種類の出力

Data URI、CSS、HTML をコピーできます。

プレビューと統計

表示とサイズを確認できます。

ローカル処理

アップロードなしで生成します。

の使い方 Data URI ジェネレーター

小さな画像、SVG、フォント、テキストを HTML / CSS スニペットへ変換します。

リソースを追加

貼り付けるかファイルを選びます。

ローカル処理、アップロードなし

MIME を確認

image/png や image/svg+xml などを確認します。

ローカル処理、アップロードなし

エンコードを選択

自動または Base64 / URL を選びます。

ローカル処理、アップロードなし

スニペットをコピー

HTML や CSS に貼り付けます。

ローカル処理、アップロードなし

Data URI ジェネレーターのワークフロー

アイコン、SVG、フォント、小さなテキスト資産に便利です。

小さな資産を追加

PNG、SVG、フォント、テキストを処理します。

生成

Data URI Generator upload workflow converting PNG SVG text and font files into browser-ready Data URIs

形式を選択

必要なエンコードに合わせます。

選択

Data URI Generator choosing Base64 or URL encoded output for SVG text and binary resources

コードをコピー

CSS、HTML、Data URI をコピーします。

コピー

Data URI Generator output cards for CSS background-image HTML img src and plain Data URI snippets

Data URI ジェネレーターの利用例

小さなアセットを個別リクエストではなく HTML や CSS に含めたい時に役立ちます。

SVG アイコン

小さな SVG を CSS や HTML に埋め込みます。

単一 HTML プロトタイプ

共有しやすい一つのファイルにまとめます。

ドキュメント例

サンプル用 Data URI を準備します。

Data URI ジェネレーターの FAQ

MIME、エンコード、ローカル処理に関する質問。

ファイルはアップロードされますか？

いいえ、ブラウザー内で処理されます。

Base64 はいつ使いますか？

画像、フォント、バイナリに使います。

URL エンコードはいつ便利ですか？

SVG、CSS、JSON、テキストに向いています。

大きなファイルに向いていますか？

いいえ、小さな資産向けです。

を使い始める Data URI ジェネレーター

リソースを追加し、Base64 または URL エンコードを選び、HTML と CSS 用 Data URI をコピーします。