Data URLパーサー｜Base64デコード

data:URLをMIMEタイプ・エンコード方式・データ部分に分解して表示します。

Data URLパーサー｜Base64デコードとは

Data URL（data:スキーム）を貼り付けるだけでMIMEタイプ・エンコード方式・データ部のサイズを瞬時に解析するオンラインツールです。base64エンコード・URLエンコード両方に対応し、Data URI構造の確認やデバッグに役立ちます。すべての処理はブラウザ上で行われます。

使い方

  1. 1解析したいData URLを入力欄に貼り付けます（data:から始まる文字列）。
  2. 2「URLを解析」ボタンをクリックします。
  3. 3MIMEタイプ・エンコード方式・データ部のサイズが表示されます。
  4. 4解析結果をコピーしてデバッグや仕様確認に活用します。

メリット・特徴

  • MIMEタイプ・エンコード方式・データ部を自動分解して表示
  • Base64エンコードとURLエンコードの両方に対応
  • データ部のサイズをバイト単位で即座に確認
  • ブラウザ上で処理されるためData URLが外部に送信されない
  • 長いData URLの構造を一目で把握できる
  • 登録・インストール不要で即座に利用可能
01

Data URLの構造と仕様

Data URLはRFC 2397で定義されたURIスキームで、データをURLに直接埋め込むための仕様です。「data:」から始まる文字列全体がURLとして機能し、ブラウザが直接リソースとして解釈します。構造を正しく理解することでデバッグが効率化されます。

Data URLの構造の詳細

Data URLは「data:[mediatype][;base64],data」の形式で構成されます。mediatypeはMIMEタイプ（例: image/png）、省略するとデフォルトのtext/plain;charset=US-ASCIIになります。「;base64」はBase64エンコードを指定するフラグで、省略するとデータ部はURLエンコードされたテキストとして扱われます。最後の「,」以降がデータ本体です。この構造をこのツールで簡単に分解・確認できます。

主なMIMEタイプと用途

よく使われるData URLのMIMEタイプには、image/png（PNG画像）、image/jpeg（JPEG画像）、image/svg+xml（SVG画像）、image/webp（WebP画像）、image/gif（GIFアニメーション）、text/html（HTML文書）、application/json（JSONデータ）、text/css（CSSスタイル）などがあります。MIMEタイプによってブラウザの処理方法が変わります。

URLエンコードとBase64エンコードの違い

Base64エンコード（;base64フラグあり）は任意のバイナリデータをASCII文字に変換します。データサイズが約33%増えますが、バイナリを確実にテキストとして扱えます。URLエンコード（;base64なし）はHTMLやSVGなどのテキストデータを%エンコードする方式で、SVGをData URLにする場合はURLエンコードの方がサイズが小さくなることがあります。

02

Data URLのデバッグと最適化

Data URLは便利な反面、サイズが大きくなりやすくデバッグが難しいという課題があります。このツールを活用しながら、効率的なData URLの管理と最適化の方法を紹介します。

Data URLのトラブルシューティング

画像が表示されない場合は、まずMIMEタイプが正しいかを確認します。data:image/jpegのデータにPNGが入っているケースや、Base64の最後の「=」パディングが切れているケースがあります。このツールで解析するとMIMEタイプとデータサイズをすぐに確認でき、問題の原因を特定しやすくなります。データ部の先頭数文字で画像形式を識別できます（PNGはiVBOR、JPEGは/9j/）。

Data URLのサイズ最適化

Data URLはHTTPリクエストを削減できますが、サイズが増加するためHTMLのダウンロード速度に影響します。目安としてデコード後サイズが5KB以下のリソースに限定することを推奨します。SVGの場合はBase64の代わりにURLエンコードを使うとサイズを節約できます。大きなData URLはHTTPリクエスト分離とブラウザキャッシュを活用する方が全体的なパフォーマンスに優れることが多いです。

セキュリティ上の注意点

信頼できないソースから受け取ったData URLはブラウザで直接開く前に内容を確認することを推奨します。text/htmlのData URLはJavaScriptを実行できるためXSSに悪用されることがあります。このツールでMIMEタイプとデータ部を事前に確認することで、意図しないデータを実行してしまうリスクを低減できます。

よくある質問（FAQ）

データURLとは何ですか？
ファイルデータをURLに直接埋め込む形式で、data:[MIMEタイプ];[エンコード],[データ]という構造です。HTML/CSSで小さな画像やSVGをインライン化するために使われます。外部ファイルへのHTTPリクエストを削減できる一方、キャッシュが効かないというトレードオフがあります。
Base64以外のエンコードにも対応していますか？
はい。Base64エンコードとURLエンコード（パーセントエンコーディング）の両方に対応しています。SVGはBase64よりURLエンコードの方がサイズが小さくなることがあり、data:image/svg+xml,%3Csvg...形式で使われます。
画像データURIを実際の画像ファイルに戻せますか？
Base64エンコードされた画像データの場合は、Base64to画像ツールを使うとファイルとしてダウンロードできます。このツールはData URLの構造を解析・表示するためのものであり、ファイルへの変換にはBase64→画像変換ツールをご利用ください。
MIMEタイプとは何ですか？
MIMEタイプはデータの種類を表す識別子です。image/pngはPNG画像、text/htmlはHTML文書、application/jsonはJSONデータを意味します。Data URLではMIMEタイプによってブラウザがデータを正しく解釈します。
Data URLが正しいか確認するにはどうすればいいですか？
このツールにData URLを貼り付けることで、構造が正しく解析されるか確認できます。MIMEタイプが正しく表示され、データ部のサイズが妥当な値であれば正常なData URLです。解析エラーが出る場合はdata:から始まっているか、セミコロンやコンマの位置が正しいかを確認してください。
どんな場面でData URLパーサーを使いますか？
CSSに埋め込んだBase64画像のMIMEタイプ確認、APIが返すData URLのデバッグ、HTMLソースコードに含まれるData URIの分析、DataURL形式で出力されたCanvasスクリーンショットの内容確認などに活用できます。

不具合や動作がおかしい点を見つけたら教えてください。

不具合報告はこちら →