CSSスプライトより優れたソリューションはありますか？

Question

これは特定のプログラミング問題についての質問ではなく、さまざまな概念を調べることです。司会者がこれがいいと感じない場合は、私の質問を削除してください。

テーブルtdに100個の画像を表示する必要があり、その画像は75x16個のPNGです。 HTTPリクエストの数を減らすために、大きなスプライトシートに166枚の画像（約100枚しか表示されていません）をグループ化し、一度に1枚の画像を出力するためにIMGタグを使用しました。これはコードです：

CSS：

.sprites {background-image:url('folder/spritesheet.png');background-color:transparent;background-repeat:no-repeat;display:inline;} 
#png3 {height:16px;width:75px;background-position:0px 0;} 
#png5 {height:16px;width:75px;background-position:-75px 0;} 

PHP：

$classy = "png" . $db_field['imageid']; 
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='alt' align='absmiddle'/>" , "</td>"; 

$の上品なSQLクエリの出力に基づいて正しい画像を呼び出している変数です。 transparent.gifは1ピクセルの透明なgifです。そして、これは画像が正しく表内に表示され、その結果である：

ページの読み込み速度は多分50から60パーセント、大幅に増加しました。私の以前の質問の1つでは、これが良い習慣であるか否かに関していくつかの懸念が提起された。しかし、それは動作します。

私が見つけた唯一の解決策は、jar圧縮を使用することですが、そのコンセプトはFirefoxのみで動作します。 166枚の画像の

$logo = "jar:http://www.website.com/logos.jar!/" . $db_field['imageid'] . ".png"; 
echo "<tr>" , "<td>" , "<img src='$logo' alt='alt' width='75' height='16'/>"; 

すべてのjarファイルがあるとしてjarアーカイブに圧縮され、サーバーにアップロードされており、これはjarファイル圧縮（PHP、無CSS）を使用して、これらの同じ画像を表示するために使用されるコードであります非実体のアーカイブであり、呼び出されたイメージだけが抽出され、すべてではありません。このソリューションは高速で、多くの画像をより速く表示する方法は見たことがありません。概念はhereであり、リンクが必要です。 CSSスプライトに対するもう1つの利点は、各画像を個別にサイズに合わせて最適化することができる点です（画像に応じて1つは64色、もう1つは128,32 ...）、大きなスプライトシートは最適化できません多くの色が含まれています。

だから誰も、瓶と同等に速いソリューションを知っていますか？コンテンツを表示するためにCSSスプライトを使用するのが悪い習慣である場合 - 同じ結果をもたらす良い方法は何ですか？ここで重要なのは、できるだけ少ないHTTP要求でWebサイトの読み込み速度です。

Answer 1

ない本当にこの上の専門家が、私はまた

HTTPは、これまで「2つの同時接続」（recent browsers have around 6-8）のことを聞いた

を要求し、これらの事で私のシェアを持っていました。たくさんのものをロードするとは、2つが同時にロードされている場合、他のロードは2行を待つ必要があることを意味します。 1つの大きなチャンクにロードする方が良いです。これがスプライトを使用する主な理由です。接続制限の他に、あなたはそれらの「同じ目的」の画像を1つの画像で管理します。

キャッシュ今

、一つの大きな塊は、私が言っていますが、「それをさらに悪化させることはないの？」頼むかもしれません。いいえ、私は自分の袖の上にエースを持っているので、それは "キャッシュ"が出場するところです。 1ページの読み込みだけで十分です。そのイメージを必要とする残りのページは、光の速度と似ており、別のHTTPリクエストからあなたを救います。決してキャッシュのパワーを過小評価しないでください。

画像あなたが行うことができます

他のものは、あなたのイメージを最適化することです。私はFireworksを使用しており、イメージ最適化ツールが大好きです。アイコン、画像のためのJPGのみ、透明なもののためのPNG画像のための

• GIFファイル：最適化するには、ここで私はあなたがあなたの状況で使用できる従ってください個人的なガイドラインです。

• 未使用の色を削除します。はい、いくつかのツールでこれを行うことができます。サイズを縮小する

• イメージをHTMLで決してサイズ変更しない。代わりにバージョンのサイズを変更しました。

• 品質を低下させます。はい、そんなことがあります。イメージの品質を合理的な限度まで下げてください。それをあまりにも失うと、あなたのイメージがあまりにも "曇っている"か "塊状"になります。

• プログレッシブロードイメージ。それは、ぼやけたイメージを「高速読み込み」し、後でそれをクリアすることです。

• 動画は避けてください。彼らは怒っていることは言うまでもなく、膨らんでいます。

サーバートリックは

接続の制限があります - それはusing other domains or even subdomainsからあなたを防ぐことはできません！他のドメインまたはサブドメインにコンテンツを配布して、接続数を増やしてください。画像の場合は、img1.mysite.comとimg2.mysite.comなどのサブドメイン1つまたは別のドメインmysite2.comを使用します。ユーザーにとって有益なだけでなく、サーバーの負荷を分散することも有益です。

もう1つの方法は、コンテンツ配信ネットワーク（CDN）を使用しています。 CDNには、ウェブサイトリソースの「キャッシュされた」バージョンを含むサーバーのグローバルネットワークがあります。アジアにいると言うように、私はあなたのサイトをCDNのリソースで見ると、最も近いアジアのサーバーでそのリソースを見つけます。

マークアップ

必ずしも速度とセマンティクスを関連するがidの使用がより重要な目的のために予約されなければならないわけではありません。 IDを使用してイメージのスタイルをマークすると、同じイメージを必要とする別の要素があった場合はどうなりますか？ IDはユニークである必要があり、2回使用することはできません。ですから、代わりに複数のクラスを使用することをお勧めします。

また、IDがクラスよりも優先されます。予期しないオーバーライドを避けるために、クラスを使用します。 CSS specificityについては、こちらをご覧ください。

.sprites { 
    background-image:url('folder/spritesheet.png'); 
    background-color:transparent; 
    background-repeat:no-repeat; 
    display:inline; 
    height:16px; /*same width and heights? place them here instead*/ 
    width:75px; 
} 
.png3 { 
    height:16px; /* in cases you need a different dimension, this will override */ 
    width:75px; 
    background-position:0px 0; 
} 
.png5 { 
    background-position:-75px 0; 
} 

$classy = "png" . $db_field['imageid']; 
echo <img src='transparent.gif' class='sprites {$classy}' alt='alt' align='absmiddle'/>"; 

Answer 2

私は、スタイルシート内の小さな画像/アイコン埋め込む：これはすべての最新ブラウザで動作し、スプライトを作成するために私を必要としない（プラスそれも負荷に一つの追加のファイルを保存し

.someicon{ 
    background-image:url('data:image/png;base64,iVBORw0KGg....'); 
} 

を）。

.someicon{ 
    background-image:url('../images/someicon.png'); 
} 

及びIは、一つにすべてのCSSを統合縮小化と画像を交換含む（最終的なスタイルシートを生成するシステムを有する：

開発において、画像はそうよう、通常スタイルシートで定義されています私はスタイルシートを変更するたびに自動的にdata：urlで参照します）。

これはうまく動作し、私に多大な労力を節約します。 gzipで圧縮すると、CSSファイルは個々のファイルが一緒に追加されたものよりはるかに大きくありません。 PNG/JPGファイルを最適化した後、スタートページのCSSは63Kで圧縮されています。 Spriteファイルを少し小さくしても、平均的なユーザーの読み込み時間は数分の1秒を超えないので、スプライトを気にしません。