Data URI 変換ツール

Data URI 変換ツールについて

data URIはファイルの中身をURLそのものに書き込む方式です。「data:image/png;base64,iVBOR…」のような形で、imgのsrcやCSSのurl()に入れると別ファイルを取りに行かずに画像が表示されます。形式は1998年のRFC 2397で定められました。

このツールは双方向に使えます。ファイルを入れるとBase64のdata URI、サイズの増え方、そのまま使えるCSS(background-image、フォントなら@font-face)を作り、data URIを貼るとMIMEタイプ・符号化方式・元のサイズを表示し、ファイルとして保存できます。

data URIの読み方

文法は data:[メディアタイプ][;base64],データ です。最初のカンマの前が説明、後ろが中身です。メディアタイプを省略するとRFC 2397は text/plain;charset=US-ASCII とみなします。「data:,Hello%2C%20World%21」も正しいdata URIで、このツールでは text/plain、13バイト、「Hello, World!」と表示されます。

;base64があればカンマの後ろはBase64、なければパーセントエンコードです。このツールは%XXをUTF-8として解釈せずそのままバイトに戻すので、%FF%00のようなバイナリやcharset=Shift_JISのテキストも失われず、保存時にはcharsetをファイルの形式に付けます。画像やフォントはほぼBase64で書きますが、SVGはもともとテキストなのでBase64にすると33%増え、<、>、# など一部を置き換えるだけのパーセントエンコードの方が短くなります。

サイズ:33%は大きなファイルでの話

Base64は3バイトを4文字にするので中身は ceil(n/3)×4 文字、さらに「data:image/png;base64,」の22文字が付きます。30,000バイトのPNGはBase64で40,000文字、URI全体で40,022文字(+33%)。100バイトのアイコンはBase64で136文字(+36%)、全体では158文字(+58%)です。ツールが2つの増加率を分けて表示するのはこのためです。

インライン化が逆効果になるとき

data URIの利点はHTTPリクエストを1つ減らせることです。接続数の制限があったHTTP/1.1時代は小さなアイコンのインライン化が確実に効きましたが、1本の接続で多数のリクエストを並行処理できるHTTP/2以降、その効果は小さくなりました。一方で欠点はそのままです。

• 個別にキャッシュできない:インライン画像は、それを含むCSSやHTMLの一部としてしかキャッシュされません。ロゴを1つ変えるとCSS全体を取り直すことになり、複数ページのHTMLに入れればページごとに同じバイトを受け取ります。
• 描画を止める:CSSがそろうまで画面は描かれないので、CSS内の大きなdata URIは初回表示をその分遅らせます。
• 優先度や遅延読み込みが効かない:loading="lazy"やsrcsetの意味がなくなり、画面外の画像も必ず一緒に届きます。
• 33%大きい:gzipなどの圧縮で一部は取り戻せますが、元の画像より大きいままです。

それでも向いている場面

数百バイト程度のアイコンや模様、一度しか使わないローディング表示、外部画像がブロックされがちなHTMLメール、単一ファイルのレポート、オフラインで開く文書などです。Webフォントを@font-faceにインライン化すると表示時のちらつきは減りますが、フォントは数十KBあることが多く、その分CSSが重くなります。

セキュリティ上の注意:主要ブラウザはフィッシング対策として、アドレスバーやリンクからdata: URLをトップレベルのページとして開くことを禁止しています。画像やスタイル内での利用には影響しません。

例

使い方

1. ファイル→data URI:ファイルをドロップまたは選択すると、URI・サイズ変化・CSSが表示されます。
2. フォントならフォント名を入れて@font-faceルールをコピーします。
3. data URI→ファイル:文字列を貼るとタイプとサイズを確認でき、画像はプレビューし、ファイルとして保存できます。

よくある質問