スプライト/ PNGグラフィック重いサイトは、私のオハイオ州！

Question

私は非常にグラフィックを多用（テクスチャーグラフィックスの上に透明な影などで引き裂かれた紙の背景）私は、ファイルサイズの節約を考えていた一つの方法だったが、1つのPNGにすべての私の背景要素をドロップすることで、サイトを作成する必要があります。問題は、このファイルは今180Kであるということです。私は様々なGIFやカップルのPNGファイルに分割している場合、それは70Kに近いだろう。

それは本当に重要ですか？ファイルサイズのため、これらの日、「大きすぎる」とは何ですか？ファイルが180または70Kであれば誰でも気づくでしょうか？

Answer 1

ユーザーが（イントラネットのように、）あなたのサイトへの高速アクセスを持っている場合は、

、180Kはほとんど問題ありません。一方、サイトがユーモラスに低速接続で一般的な高齢者によって使用されている場合、おそらく問題になるだろう。ユーザーがGPRSを使用しますが、無限の忍耐を持っている場合、おそらく問題になることはないだろう。サイトは、ロード時間を待つ忍耐を持っている誰に数百万ドルを与えた場合、転送速度は問題ではありません。そしてそうでます。

私が言っている何、それは本当にあなたの要件や制約に依存します。これは、あなたがそれを右に近づけることができる前に多くのことを（私たちはより有用であるために、私たちに教え、その後と）知っている必要があります。

非常に-有効-答え - しかし、単に-doesn't-ください - 誰かのためにそれらの厄介なdownvotesを避けるために、ここに私の答えです。

180K標準ADSLモデム転送速度= 180KB / 100KB / S = 1.8s =耐えで割った。

Answer 2

は、のないの小さい画像を使用することが理由ですか？それはあなたがすでにそれを壊れているように聞こえるので、なぜ小さく、より高速な方法で行かない？

ビューの純粋な相対論的な観点から、70Kは、180K（約）であろうと、ダウンロード時間のわずか38％がかかります。あなたが大量のトラフィックを期待したり、高速のロード時間を希望している場合は、すべてのビットを助けます。

Answer 3

あなたはそれがすべて別々の画像と、それは一つの大きなものをダウンロードするのにかかる時間を要求するのにかかる時間を比較する必要があります。問題は、HTTPリクエストです。

私はあなたがGoogleのFirefoxの拡張機能でいくつかのテストを実行する提案、のPageSpeed を表示するには大PNGまたは別のものとの間に大きな差がある場合。

私は少数のHTTPリクエストのほかに、と考えることができます1つの利点は、すべてのグラフィックスがダウンロードされているとして、あなたのサイトは、かつての代わりに、徐々にですべてをロードすることです。一番下の行は、しかし、ヘンリクが言ったように、それはあなたの要件に依存していることである。

Answer 4

私はあなたが複数の画像に分割するが、それぞれに関連するラグ、そしてリクエストとレスポンスヘッダの追加の大きさで、それらを取得するために、サーバーへの追加の接続を意味していることを認識しております確信してます。

ブラウザは、これは、単一の画像を取得するよりも時間がかかってしまうことがあり、各サーバに（ブラウザのバージョンに依存する）アクティブな接続の数を制限するため。制限を解除するための通常の回避策は、別の「画像」サーバー、または同じホストにマップするDNSエイリアスを使用することです。

そして、あなたはアニメーションを必要としない限り、私はいつもGIFの上にPNGをお勧めします。

Answer 5

のサイトには、最初の画像が無効に設定して正常に見えることを確認します（そうALTタグ、幅と高さを設定、正しい色が使用される）、その後、グループにアップ基づいて画像を分割します。グループ1枚の画像にあなたのすべてのボタン（CSSスプライトシートを使用して）可能ならば、そして国境のすべての他に。別々のファイル（そのサイトの背景、ヘッダ）で大きな画像を保管してください。

あなたが持っているより多くの画像は、より多くのブラウザがリクエストを並列化することができます。 。あなたがそれらを分割ただし、あまりその後、別の画像がそれはトレードオフのビットだとする部位ポップの部品を製造、異なる時間にロードされますが、それは、プログラミングの喜びです：）

より良いあなたのサイトは、画像が表示される前に、より少ないユーザーが画像をダウンロードの速度を気にします見えます。