24

誰かが背景画像でテストを行ったかどうか疑問に思っていました. 通常、少なくとも一方向 (x または y またはその両方) に繰り返される背景を作成します。

例
X 方向に繰り返されるグラデーションの背景があるとします。グラデーションの高さは 400px です。いくつかの可能性があります。できるだけ小さな画像 (幅 1 ピクセル、高さ 400 ピクセル) を作成することも、高さ 400 ピクセルの大きな画像を作成することもできます。

考察
グラデーションの高さは 400 ピクセルなので、おそらく GIF 形式は選択しません。256 のアダプティブ カラーしか保存できないからです。グラデーションがそれほど多くないため、微妙な場合はこれで十分かもしれませんが、それ以外の場合は、完全なグラデーションの詳細を保持するために、画像を 24 ビット PNG 画像として保存することをお勧めします。

1×400 px サイズの画像を横方向にn
回 繰り返すか、ブラウザでのレンダリングを高速化し、画像ファイル サイズを大きくするために 100×400 px サイズの画像を作成するかのジレンマ。

そう。画像サイズとレンダリング速度は? どっちが勝つ？これをテストしたい人はいますか？ブラウザのレンダリング速度と、小さな画像の再描画のちらつきの可能性について...

4

7 に答える 7

13

より大きなタイルをブラウザのキャッシュに入れることができるため、レンダリング速度がここでのボトルネックになります。

私は実際に主要なブラウザでこれを試しましたが、少なくとも一部のブラウザは非常に小さなタイルで著しく遅くなりました。

したがって、ビットマップサイズを大きくしてもファイルサイズが途方もなく大きくならない場合は、間違いなくそれを使用します。自分でテストして見てください。（まだ多くの人がIE6に固執しているので、IE6を含めることを忘れないでください）。

ビットマップサイズとファイルサイズのバランスをとることができるかもしれませんが、一般的には50x400、100x400、200x400、さらには400x400ピクセルを試してみます。

于 2009-10-07T09:14:24.347 に答える
4

余分な数行（ここでは1〜2の例のみ）を送信するコストについては、2.4kb〜4.0kbのように.8k〜1.6kb（8ビットで回避できる場合）であることを指摘しておきます。 24ビット

2ピクセル列多いということは、背景をブリットインするために必要な反復が、最大1.6kb（8ビット）または4kb（24ビット）で1/3に削減されることを意味します。

1つの余分な列でさえ、必要なブリッティングを要素幅の半分に半分にします。

56.6kモデムのバックグラウンドが1秒未満で完了した場合、十分に無駄がないと思います。

于 2011-05-12T01:36:08.490 に答える
1

画像のサイズが小さいとレンダリングに悪影響が出る場合は、適切なブラウザを使用すると、タイリングする前に画像を内部で数回ブリットするはずです。

とはいえ、私は1ピクセルの画像サイズを使用しない傾向があるため、サイズを変更しなくても画像をはっきりと見ることができます。PNG圧縮は、ほとんどの状況で、ファイルサイズにほとんどコストをかけずにこれを処理するのに十分です。

于 2009-10-07T09:13:29.527 に答える
0

レンダリングエンジンがタイリングを行うのではなく、画像のダウンロードというボトルネックにお金をかけるので、1ピクセル幅のオプションを選択します。

また、24ビットPNGは、チャネルごとに8ビット（赤、緑、青）しか取得できないため、冗長です。

于 2009-10-07T08:39:57.050 に答える
0

私は一般的にその中間を好む.単一の画像にパターンと画像を追加し、バックグラウンド ポジショニング ( css スプライト) を使用してそれらを配置します。これは、ブラウザーがサーバーへの要求を少なくするため、たとえば 50kb の単一の画像をダウンロードすると、40kb の画像を 5 つダウンロードするよりも時間がかからないためです...

于 2009-10-07T08:51:12.523 に答える
0

これをベンチマークしたことはありませんが、最新のほとんどのコンピューターではレンダリングが問題にならないことは間違いありませんが、常に画像のダウンロード時間を節約したいと考えています. 私はよく 1px タイプのグラフィックスを使います。

于 2009-10-07T09:28:31.917 に答える