すべてのブラウザに対応したデータURIとMHTMLの完全なソリューション

データURI

Data URI は、小さなファイルをドキュメントに直接埋め込むために RFC 2397 で定義されたスキームです。次の構文を使用すると、小さなファイルを指定されたエンコーディングに変換し、ページに直接埋め込むことができます。

data:[<MIMEタイプ>][;base64],<データ>

MIME タイプ: 埋め込まれたデータの MIME タイプを指定します。形式は [type]/[subtype]; パラメータです。たとえば、png 画像に対応する MIME は image/png です。パラメータは追加情報を指定するために使用できますが、text/plain や text/htm などのテキストエンコードの charset パラメータを指定するために使用されることが多いです。デフォルトは text/plain;charset=US-ASCII です。
base64: 次のデータが base64 でエンコードされることを宣言します。それ以外の場合は、データをパーセントエンコードする必要があります (つまり、コンテンツを urlencode します)。

Data URI スキームは、前世紀の HTML4.01 で導入されました。現在、IE6 と IE7 を除くすべての主要ブラウザがこれをサポートしています。ただし、IE8 では Data URI のサポートがまだ限定されており、オブジェクト (画像のみ)、img、input type=image、link、および CSS の URL のみがサポートされ、データサイズは 32K を超えることはできません。

アドバンテージ：

HTTP リクエストの数を減らし、TCP 接続の消費と、同じドメイン名でのブラウザの同時実行数の制限を排除します。
小さなファイルの場合、帯域幅が減少します。エンコード後はデータ量が増えますが、http ヘッダーは削減されます。http ヘッダーのデータ量がファイルエンコードの増加量よりも多い場合、帯域幅は削減されます。
HTTPS サイトの場合、HTTPS と HTTP を混在させるとセキュリティプロンプトが表示されます。また、HTTPS のオーバーヘッドは HTTP よりもはるかに大きいため、この点では Data URI の方が明らかに有利です。
マルチメディアページ全体をファイルとして保存できます。

欠点:

再利用できません。同じドキュメント内で同じコンテンツを複数回使用すると、複数回繰り返す必要があり、データ量とダウンロード時間が大幅に増加します。
独立してキャッシュすることはできないため、それを含むドキュメントが再読み込みされると再読み込みされます。
クライアントは再度デコードして表示する必要があり、消費量が増加します。
データ圧縮はサポートされていません。Base64 エンコードではサイズが 1/3 増加し、URL エンコードされたデータではサイズがさらに増加します。
セキュリティソフトウェアのフィルタリングには役立たず、一定のセキュリティリスクがあります。

HTML の

MHTML は MIME HTML (Multipurpose Internet Mail Extension HTML) の略称で、RFC 2557 ではマルチメディアページのすべてのコンテンツを同じドキュメントに保存するためのソリューションとして定義されています。このソリューションは Microsoft によって提案され、IE5.0 からサポートされており、Opera9.0 でもサポートされるようになりました。Safari は .mht (MHTML ファイルサフィックス) 形式でファイルを保存できますが、表示はサポートされていません。

MHTML は Data URI と非常に似ていますが、より強力な機能とより複雑な構文を備えており、Data URI の「再利用できない」という欠点はありません。ただし、MHTML は柔軟性と使いやすさに欠けています。たとえば、mht ファイル内のリソース参照の URL は相対アドレスにすることができますが、そうでない場合は絶対アドレスにする必要があります。 hedger の「HTML に埋め込まれたクロスブラウザ Base64 エンコード画像」の IE 向けソリューションが相対パスを使用する理由は、Content-type:message/rfc822 の宣言により、IE が MHTML に従って解析するようになるためです。Content-type が変更されていない場合は、MHTML プロトコルを使用する必要があります。このとき、「MHTML - データが必要な場合: IE7 およびそれ以下の URI」のように絶対パスを使用する必要があります。

応用

Data URI と MHTML を組み合わせると、すべての主流ブラウザの問題を完全に解決できます。キャッシュして再利用できないため、Web ページで直接使用するのは適していませんが、CSS および JavaScript ファイル内の画像に適切に使用すると大きな利点があります。

リクエスト数を大幅に削減します。現在、大規模な Web サイトの CSS は大量の画像リソースを参照しています。
CSS と JavaScript の両方をキャッシュすることができ、間接的にデータキャッシュを実装します。
CSSを使用するとデータURIの再利用の問題を解決できる
CSS スプライトとはお別れです。CSS スプライトはリクエスト数を減らすために作成されました。しかし、不確実な状況で例外が発生するだけでなく、CSS スプライトでは手動で画像をマージする必要もあります。マージツールを使用した場合でも、パズルを効果的に組み立てる方法を手動で見つけ出すのに多くの時間を費やす必要があり、メンテナンスが困難になります。特定の設計原則に従うと、CSS を記述するために CSS スプライトを完全に放棄し、最終的に「data-uri を使用してスタイルシートと画像をマージする」で Python に実装されているツールなど、画像をサーバーにアップロードするときにデータを URI と MHTML に変換するツールを使用できるようになります。これにより、多くの時間を節約できます。
Base64エンコードでは画像ファイルのサイズが1/3増加し、Data URIとMHTMLを併用すると2/3増加するのと同等です。しかし、CSSとJavaScriptはgzipを使用して圧縮できるため、2/3のデータを節約できます。そのため、gzip圧縮後の最終データサイズは(1 + 1/3) * 2 * (1/3) = 8/9となり、最終的な通信量が削減されます。

CSS でのデータ URI と MHTML の実装を容易にするために、データ URI と MHTML のジェネレーターを作成しました。これを使用してデータ URI と MHTML のアプリケーション例を生成する方法を確認できます。

CSS ファイルで MHTML を使用する場合、URL は絶対パスを使用する必要がありますが、これは非常に柔軟性に欠けます。したがって、この問題を解決するには、CSS 式の使用を検討できます (DEMO)。次に例を示します。

/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*背景画像:式(関数(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}（これ））;

<<: Vue のライフサイクルとフック関数の詳細な説明と典型的な面接の質問

>>: CSS3 3Dクールキューブ変形アニメーションの実装