data URI 変換ツール
画像・SVG・フォント ⇄ Base64 data URI（すべてブラウザ内で処理）
画像を読み込む
またはクリックして選択
data URI を貼り付け
data URI 変換ツールの使い方
画像やSVG、Webフォントを Base64 の data URI（data:image/png;base64,... で始まる文字列）に変換したり、逆に data URI を画像へデコードして保存したりできる無料ツールです。ドラッグ＆ドロップまたはファイル選択で読み込むだけで、data URI とあわせて CSS の background-image 用スニペットや img タグ用スニペットを自動生成します。すべての処理はブラウザ内で完結し、ファイルがサーバーへ送られることはありません。
画像 → data URI（エンコード）
「画像 → data URI」タブでファイルを読み込むと、data URI 全体、CSS 用・HTML 用のスニペット、そしてプレビューが表示されます。元のファイルサイズ・data URI の文字数・増加率も確認できるため、埋め込みに適した小さな素材かどうかを判断できます。PNG・JPEG・GIF・WebP・SVG のほか、woff / woff2 / ttf / otf などのフォントファイルにも対応しています。
data URI → 画像（デコード）
「data URI → 画像」タブに data:... の文字列を貼り付けると、MIME タイプ・エンコード方式・デコード後のサイズを解析してプレビューを表示し、ボタン一つで元の画像ファイルとしてダウンロードできます。Base64 版はもちろん、URL エンコード（パーセントエンコード）された SVG の data URI にも対応しています。
data URI とは
data URI（データURIスキーム）は、ファイルの中身を URL の文字列そのものに埋め込むための仕組みです。data:[MIMEタイプ][;base64],[データ本体] という構造で、たとえば data:image/png;base64,iVBOR... のように表します。外部ファイルへのリンクではなく画像データ自体を HTML や CSS に直接書けるため、小さなアイコンやロゴを別ファイルにせずまとめられ、HTTP リクエスト数を減らせるという利点があります。
| 用途 | 書き方 | ポイント |
|---|---|---|
| CSS 背景 | background-image: url(data:...) | url() の中にそのまま指定できる |
| HTML 画像 | img の src に data URI を指定 | 外部ファイル不要で表示される |
| SVG | URLエンコード版の data URI | Base64より軽量でCSSでも読みやすい |
Base64 とサイズ肥大に注意
Base64 エンコードは 3 バイトを 4 文字で表現するため、data URI にすると元のファイルより約 33% サイズが増えます。数百バイト〜数 KB の小さなアイコンでは、リクエスト削減の効果がサイズ増を上回ることが多いですが、大きな写真を data URI 化すると HTML や CSS が肥大化し、キャッシュも効きにくくなって表示が遅くなります。目安として、繰り返し使う小さな素材は data URI、サイズの大きい画像は通常の画像ファイル参照、と使い分けるのがおすすめです。SVG はテキストなので Base64 より URL エンコード版の方が軽量です。