Data URI ジェネレータ
アップロードされたファイルまたは貼り付けたテキストを選択したMIMEタイプでdata URIに変換します（data:<mime-type>;base64,<data>）— 元のサイズとエンコードされたサイズのバイト統計を含み、HTML、CSS、またはJSONにインラインで埋め込む準備ができています。
入力
ファイルはローカルで読み込まれます — サーバーにアップロードされることはありません。
出力
画像のMIMEタイプの場合、ここに画像プレビューが表示されます。
| メトリック | 値 |
|---|---|
| No data yet | |
このツールを使う他の方法
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/data-uri-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Data URI ジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
次の方法でも利用可能
ガイド
Data URI（またはdata URL）はファイルのコンテンツを文字列に直接埋め込みます — data:<mime-type>;base64,<data> — 通常のURLが予想される場所で、別のHTTPリクエストなしで使用できるようにします。このツールはアップロードされたファイルまたは貼り付けたテキストから1つを作成し、エンコードされたバージョンが元のバージョンよりも正確にどれだけ大きいかを報告します。
使い方
- ソースを選択します: ファイルをアップロード（任意のファイルタイプ — 画像、フォント、PDF、オーディオなど）またはテキストを入力（プレーンテキスト、HTML、CSS、JavaScriptまたはSVGマークアップを貼り付けて、そのMIMEタイプを選択）。
- ファイルアップロードの場合、ブラウザはファイル自体からMIMEタイプを自動的に検出します。間違っている場合、または別のタイプが必要な場合は、検出されたMIMEタイプをオーバーライドをチェックして、手動で1つを入力します（例：
image/png、font/woff2）。 - 結果のData URIをコピーします —
<img src>、CSSbackground-image: url(...)、JSONフィールド、または@font-facesrcに貼り付ける準備ができています。 - サイズとタイプテーブルをチェックして、検出/選択されたMIMEタイプ、元のバイトサイズ、エンコードされたdata URIサイズ、およびパーセンテージの増加を確認します。
- ソースが画像の場合、ライブプレビューがdata URIの下に表示されるため、使用する前に正しくデコードされたことを確認できます。
すべてはブラウザでローカルで実行されます — アップロードされたファイルがサーバーに送信されることはありません。
Data URIが元のファイルよりもはるかに大きいのはなぜですか？
Base64エンコーディングはバイナリデータの3バイトごとを4つのASCII文字として表現し、それだけでサイズに約33％を追加します。その上、data:<mime-type>;base64,プレフィックスは小さな固定オーバーヘッドを追加します。短いスニペットの場合、このオーバーヘッドが支配的になる可能性があります — "Hello, World!"の13バイトをエンコードすると、元の長さの3倍以上のdata URIが生成されます — ただし、より大きなファイルの場合、パーセンテージの増加は~33％のbase64オーバーヘッドに収束します。
Data URIを通常のファイルの代わりに使用すべき場合は?
Data URIは、小さく、頻繁に再利用されるアセット（アイコン、小さな背景画像、ウェブフォント、小さなプレースホルダー画像）に役立ちます。ここで、HTTPリクエストを保存することは~33％のサイズペナルティと、アセットがもはや独立してキャッシュされたり、ページ間で共有されたりできないという事実よりも重いです。数キロバイトより大きいもの、または多くのページで再利用されるアセットの場合、ブラウザがキャッシュできる通常のリンクされたファイルがほぼ常に最良の選択です。
英語以外のテキストまたは絵文字で機能しますか？
はい。貼り付けたテキストはBase64エンコードされる前にUTF-8でエンコードされるため、アクセント付きの文字、CJKテキスト、および絵文字はすべて正しく往復します。（一部の古いツールはbtoa(unescape(encodeURIComponent(text)))トリックを使用しており、特定のUnicodeテキストを誤って処理します — このツールはTextEncoderを直接使用します。）
貼り付けたテキストに対してどのMIMEタイプを選択すべきですか？
コンテンツを照合します：プレーンテキストの場合はtext/plain、HTMLフラグメントの場合はtext/html、スタイルシートの場合はtext/css、スクリプトの場合はtext/javascript、SVGマークアップの場合はimage/svg+xml（これはSVGプレビューのレンダリングを行うものです）。正しいMIMEタイプを取得することは、data URIが何かによって検査される場合に重要です。例えば、<img>タグをレンダリングするブラウザはimage/*タイプが必要です。
関連
反対方向に進む場合 — data URIまたはBase64文字列をプレーンテキストにデコードする場合 — Base64 Decodeを使用します。SVG については具体的には、SVG to Base64 Encodeもdata URIの横に貼り付ける準備ができたHTML <img>およびCSS background-imageスニペットを生成します。