css - CSSでの画像ファイルとデータURIの使用

Question

自分が書いたスクリプトに必要な画像を含めるための最良の方法を決定しようとしています。

私はこのサイトを発見し、画像をデータURI （ RFC 2397で定義）として含めることを考えさせられました。これは非常に小さいためです。1x1ピクセルの50％不透明度のpngファイル（背景に使用）です。 CSSのテキストとして3,746バイトであるのに対し、画像としては2,792バイトになります。

それで、これは良い習慣と見なされますか、それともCSSを不必要に乱雑にするだけでしょうか？

Answer 1

画像ではなくデータURIを使用するのには十分な理由があります。

データURIはbase64でエンコードされています。つまり、画像よりも約25％大きくなっています。ただし、CSSファイルはキャッシュできるため、サイズを小さくしても大きな問題にはならないでしょう。

画像がたくさんある場合は、名前解決と別のリソースとしての画像の取得の両方の観点から、それぞれを検索するためのオーバーヘッドがあります。

つまり、画像が小さく、CSSファイル全体がまだ小さく、頻繁にヒットするページ間でCSSが共有されている場合、データURIに切り替えるとパフォーマンスが向上します。

欠点は、FX、Chromeなどでのみ機能することです。IE8では部分的に機能しますが、小さい画像でのみ機能します。IE7以下ではまったく動作しません。

Answer 2

私はあなたが多くを得るとは思わない...そしてそれがファイル画像であるならば、ブラウザはそれをキャッシュすることができる。あなたが本当にそれを必要としない限り、私はCSSでそれをすることを気にしないでしょう。

Answer 3

私はそれが今のところ無視できると思います..（小さい画像が1つありますか？）

ただし、他にも考慮すべき点がいくつかあります。

1. 将来、より多くの画像が表示される可能性はありますか?
2. css ファイルを gZip しますか?

理由は..
css にロードされたすべてのイメージに対して、サーバーへの呼び出しが 1 回少なくなり、時間がかかります。私たちは皆、スプライトからそれを知っています。結合されたすべての画像よりも大きなサイズのスプライトでさえ、好ましいです。つまり、data: URI を使用すると、追加されるすべての画像の速度低下の可能性が 1 つ少なくなります。

2 番目の質問については.. data: URI は非常に gZip に適しています。私は非常に意味します。巨大な従来の css ファイルがいくつかあります。109 kb の巨大な..そして、画像を data:URI にすると、なんと 246 kb に膨れ上がります! gZipping の後、126 kb まで減少しました。

言うまでもなく..スプライトは維持するのが楽しいものではありませんが、data: URI を使用している場合、スプライトを使用する理由ははるかに少なくなります。

それが役立つことを願っています。

PS。data:URI に関するリンク。 http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800

PS PS はそのページの下部をチェックして、Nicolas が data:URI について述べている詳細を確認してください。

Answer 4

データURIの使用とは、データURIによってCSSスプライトが廃止され、Antビルドステップを作成することでCSSEmbedツールの使用が拡張されることを指します。CSSEmbedは、「データURIに類似した内部画像を使用するIE6およびIE7互換のスタイルシートを作成するためのMHTMLモードもサポートしています。」

また、画像ファイルのバイトをbase64でエンコードされたバイトと比較する場合は、各http画像の要求/応答にhttpヘッダーのバイトオーバーヘッドがあることを忘れないでください。Yahooに反対するこの例は、約900バイトを消費します（プロキシ名をexample.comに変更しました）。さらに、yimg.comドメインは、Cookieを持たず、それらの潜在的なバイトを保存するように最適化されています。

GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1
Accept: */*
Referer: http://www.yahoo.com/
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E)
Accept-Encoding: gzip, deflate
Host: l.yimg.com
Proxy-Connection: Keep-Alive

HTTP/1.0 200 OK
Date: Sat, 31 Jul 2010 22:27:25 GMT
Cache-Control: max-age=315360000
Expires: Tue, 28 Jul 2020 22:27:25 GMT
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT
Accept-Ranges: bytes
Content-Length: 1750
Content-Type: image/png
Age: 321472
Server: YTS/1.17.23.1
X-Cache: MISS from a-proxy-server.example.com
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22)
Proxy-Connection: keep-alive

Answer 5

データ URI を使用する場合

画像スプライトの代わりにデータ URI を使用すると、単一の HTTP リクエストが保存され、すべてのビットがカウントされます。ただし、さまざまな量の空白を必要とするカスタム リストの箇条書きなど、スプライト シートに含めるのが難しい画像にはさらに便利です。

データ URI は HTTP 要求を減らすための優れた方法ですが、すべての状況で使用するのは意味がありません。生のファイル データをスタイルシートに直接埋め込むため、データ URI を乱暴に使用すると、スタイルシートが肥大化する可能性があります。

以下は便利なリンクです。

http://jonraasch.com/blog/css-data-uris-in-all-browsers

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/