Data URI ハンドラー

Data URIハンドラーは、任意のファイルをBase64データURIにエンコードしてHTML、CSS、またはJavaScriptに直接埋め込むことを可能にし、既存のデータURIを元のファイルコンテンツにデコードします。データURIはRFC 2397形式 `data:[<mediatype>][;base64],<data>` に従い、追加のHTTPリクエストなしでアセットをインライン化できます。SVGアイコン、フォント、小さな画像などの小さなアセットをインライン化することで、重要なリソースのページ読み込み遅延を大幅に削減できます。すべてのエンコード、デコード、MIMEタイプ検出、およびファイルプレビューは、サーバーへのアップロードなしで完全にブラウザ内で実行されます。

すべての開発者向けツールを見る

使い方

エンコードするには、ファイルをアップロードするか、生のテキストを貼り付け、ドロップダウンから正しいMIMEタイプを選択してください。ツールは、src、href、またはurl()属性に貼り付ける準備ができた完全なRFC 2397準拠のデータURI文字列を生成します。デコードするには、既存のデータURIを入力フィールドに貼り付け、「デコード」をクリックして埋め込まれたコンテンツを抽出し、画像やSVGをインラインでプレビューし、元のファイルをダウンロードします。すべての処理はクライアント側で行われるため、ファイルがブラウザから離れることはありません。

一般的な使用例

• •追加のHTTPリクエストを排除し、クリティカルレンダリングパスの遅延を削減するために、小さなSVGアイコン、スピナー、またはUI画像をHTMLまたはCSSに直接埋め込むフロントエンド開発者
• •外部リソースの読み込みをブロックするクライアントで一貫したレンダリングを保証するために、カスタムWebフォントとロゴ画像をBase64データURIとしてCSSスタイルブロックにインライン化するメールテンプレートデザイナー
• •フィッシングHTML添付ファイルや難読化されたスクリプトタグに見られる疑わしいデータURIをデコードし、隠されたペイロードコンテンツを明らかにするセキュリティ研究者
• •すべての資産をインラインで埋め込む、完全に自己完結型の単一ファイルHTMLデモ、オフラインドキュメントページ、またはポータブルツールウィジェットを作成するWeb開発者
• •CSS-in-JSスタイルのコンポーネント用のBase64エンコードされた背景画像データURIを生成したり、アイコンフォント用のインラインSVGデータURIを生成したりするビルドツール作成者