2009-07-22 8 views
1

非常にグラフィックスの多いサイトを作成する必要があります(テクスチャ付きのグラフィックスの上に透明な影が付いた紙の背景が引き裂かれます)。ファイルサイズを節約する方法の1つは、すべての背景要素を1つのPNGにドロップすることでした。問題は、このファイルが現在180kです。私がそれを様々なGIFといくつかのPNGに分割すると、70kに近いでしょう。スプライト/ PNGグラフィックス重いサイト、oh my!

本当に問題はありますか?最近、ファイルサイズが「大き過ぎる」とは何ですか?ファイルが180または70kであれば誰も気付くでしょうか?

答えて

3

ユーザーが(イントラネットなどの)サイトにすばやくアクセスできる場合、180kはほとんど問題になりません。一方、サイトがユーモラスに遅い接続を持つ一般的な高齢者によって使用されている場合は、恐らく問題になるでしょう。あなたのユーザーがGPRSを使用しているが、無限の忍耐を持っているなら、おそらく問題になることはないでしょう。サイトが負荷時間を待つために忍耐力を持っている人に100万ドルを出すならば、転送速度は問題ではない。等々。

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

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

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

+1

あなたは厄介なupvoteを代わりに得ます:-) – ChssPly76

1

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

純粋相対性理論の観点から見ると、70kのダウンロード時間は、180kが(約)38%になります。高いトラフィックを期待している場合や、高速な読み込み時間が必要な場合は、すべてのビットが役立ちます。

0

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

GoogleのFirefox拡張子Pagespeedでいくつかのテストを実行して、大きなpngと別のテストとの間に大きな違いがあるかどうかを確認することをお勧めします。

私が考えることができる利点の1つは、すべてのグラフィックスがダウンロードされるにつれて、徐々にサイトをロードするということです。しかし、ヘンリク氏の言葉通り、要するにそれはあなたの要求に依存しているということです。

0

複数の画像に分割するということは、サーバーへの追加の接続、それぞれの関連する遅延、および要求ヘッダーと応答ヘッダーの追加のサイズを意味します。

ブラウザは各サーバ(ブラウザのバージョンによって異なる)へのアクティブな接続の数を制限するので、1つのイメージを取得するよりも時間がかかることがあります。制限を解除する通常の回避策は、別の "イメージ"サーバー、または同じホストにマップするDNSエイリアスを使用することです。

アニメーションが必要な場合を除き、私は常にGIFでPNGをお勧めします。

0

最初に画像を無効にしてサイトが正常に表示されていることを確認してください(altタグ、幅と高さの設定、正しい色の使用)。可能であれば、すべてのボタンを1つの画像にグループ化し(CSSスプライトシートを使用)、すべての罫線を別の画像にグループ化します。大きな画像は別々のファイルに保存してください(サイト背景、ヘッダーなど)。

イメージが多いほど、ブラウザはリクエストを並列化できます。しかし、あまりにも多くを分割すると、異なる時間に異なる画像が読み込まれ、サイトの一部がポップアップします。これはやり取りのビットですが、プログラミングの楽しさです。

画像が見える前に見えるほど、ユーザは画像をダウンロードするスピードを気にすることが少なくなる。

関連する問題