データ uri_html/css_WEB-ITnose

データ URI Popular Science

この記事の著者の位置付けは実践的なものであるため、いくつかの理論的基礎についてのみ触れます。まず、データ URI とは何ですか? Wikipedia の説明を引用します:

Data URI 是一种提供让外置资源的直接内嵌在页面中的方案。这种技术允许我们只需单次 HTTP 请求即可获取所有需要引用的图片与样式资源，并因无需多次请求资源而变的高效。

その形式仕様は RFC2397 (http://tools.ietf.org/html/rfc2397) で定義されています:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Data URI の予備調査

形式仕様はそうではないようですとても親切にしてください。例として埋め込み画像を見てみましょう:

<img src="/static/imghwm/default1.png"  data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="  class="lazy" alt="Red dot">

data:image/png;base64, は固定形式、image/png は画像の MIME タイプ、base64 はデータ エンコード方式です。ここで、Base64 エンコードされたデータは元のデータよりも約 4/3 大きくなるということも指摘する必要があります。これは Base64 エンコード アルゴリズムに関連しています。 電子メールで使用する場合、RFC 822 に従って、76 文字ごとに復帰と改行を追加する必要があります。このとき、エンコードされたデータの長さは元の長さの約 135.1% になります。

理論を検証するために、さまざまなサイズの画像を Base64 エンコードする次のテストを実施しました。これは私たちの予想と一致し、元のデータと比較して 1/3 増加しました:

图片尺寸 | 原始大小 | Base64大小 | 增长率 |:-----------|:------------|:-------------|:-------------|16*16 | 618 | 824 | 34.2%24*24 | 1,063 | 1,420 | 33.6%32*32 | 1,615 | 2,156 | 33.5%42*42 | 2,510 | 3,348 | 33.4%48*48 | 2,892 | 3,856 | 33.3%96*96 | 8,217 | 10,956 | 33.3%350*350 | 49,899 | 66,532 | 33.3%

画像は、使用するために最も一般的に使用されるシナリオです。データ URI ただし、データ URI はリソース タイプに依存しない仕様です。データ URI を使用して他のリソースを埋め込むこともできます。データ URI の互換性を確認してください:

Firefox 2+

Opera 7.2+

Chrome++

Safari++

Internet Explorer 8+

ほとんどの主流ブラウザはすでにデータ URI をサポートしていますが、IE8 はデータ URI をサポートしていますが、その最大長は 32K データを超えることはできません。この制限は IE9 では解除されています。IE の詳細なドキュメントについては、Microsoft の公式ドキュメントを参照してください。 残りは、中国では依然としてクラス A ビューを持つ IE 6/7 に直面しています。データ URI と同様の MHTML を使用できます (埋め込みデータの再利用を考慮すると、その設計はデータ URI よりも優れていると著者は考えています)。 MHTML の詳細な紹介はこの記事の範囲を超えていますが、Microsoft は 2011 年に情報漏洩を引き起こす可能性のある MHTML の脆弱性に対するパッチをリリースしました。これにより、MHTML が参照できなくなるという問題が発生するため、MHTML を使用する必要があることを指摘しておきます。 IE の場合 このソリューションには大きなリスクが伴うため、知識を広げる場合にはお勧めできません。

http://technet.microsoft.com/zh-CN/security/advisory/2501696

http://www.microsoft.com/china/security/bulletins/ms03-014.mspx

データ URI のベスト プラクティス

データ URI 変換前に画像を結合しませんが、小さい画像を直接使用します。これにより、結合された画像を配置する手間が省けます。

var cvs = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);var html = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);

データの比較:

background-image:url("data:image/png;base64,iVBORw0KGgoAAA...ElFTkSuQmCC");*background-image:url(http://cdn.example.com/foo.gif);

DIY 生成ツール

Node は真のフロントエンドですわずか 3 行のコードで画像を Base64 エンコードに変換できる強力なアシスタント:

图片尺寸 | 原始大小 | Base64大小 | Gzip大小 |  Gzip压缩率 | 增长率 |:-----------|:------------|:-------------|:-------------|:-------------|:-------------|16*16 | 618 | 824 | 668 | 81.1% | 108.8%24*24 | 1,063 | 1,420 | 1,119 | 78.8% | 5.3%32*32 | 1,615 | 2,156 | 1,670 | 77.5% | 3.9%42*42 | 2,510 | 3,348 | 2,568 | 76.7% | 2.3%48*48 | 2,892 | 3,856 |  2940 | 76.2% | 1.7%96*96 | 8,217 | 10,956 | 8304 | 75.8% | 1.1%350*350 | 49,899 | 66,532 | 50,095 | 75.3% | 0.4%

Datauri 形式のデータは、画像をレンダリングするためにより多くの CPU 計算を必要とします。おそらく、パフォーマンスの低い PC では、追加の画像リクエスト ソリューションが可能である可能性があります。特にモバイル端末の CPU が限られている場合は、注意して使用する必要があります。

ここでの妥協点は、2K より小さい小さな画像のみが Base64 エンコードに変換されることです