0

Web サイトのスプライト/テクスチャ ベースの背景のページ読み込み時間を最適化する方法はありますか?

基本的に、私が行おうとしている外観は、マインクラフトの 2D 表現であり、草地より上のすべてがヘッダーになり、岩盤がフッターになります。

www.projectminecraft.comおよびwww.dokucraft.co.ukと同様

しかし、ページの読み込み時間が心配ですが、洞窟やその他の詳細が必要です。

4

2 に答える 2

1

スプライト シートを使用するには、すべての画像を含む 1 つの大きな png (または必要に応じて透過性がない場合は jpg) を作成します。（例）

次に、画像を表示したい要素ごとに、背景を次のように設定します。

background:url(my-sprite-sheet.png) 10px 40px no-repeat;

この例では、座標はスプライト シートに関連しています。背景の左上隅が画像の右から 10 ピクセル、下から 40 ピクセルの位置から始まるように背景に指示します。(奇妙なことに、0 0 は画像の左上隅になります)

私の知る限り、繰り返される (タイル状の) 背景に対してこれを行うことはできません。そのためには、各「タイル」を独自の画像として持ち、のようなものを使用しますbackground:url(my-background.png);。デフォルトでは、画像は x 軸と y 軸の両方で繰り返されます。repeat-x repeat-yとで繰り返しをさらに定義できますno-repeat。

お役に立てれば！

于 2013-10-30T15:26:31.770 に答える
1

繰り返されるコンテンツの大きな背景の場合、最小の形式で並べて表示される画像を作成background-repeat: repeatし、CSS で使用する必要があります。

全体をタイル状に並べることができない場合は、可能な限りタイル状に並べてみてください (通常は端と底が適しています)。最新のブラウザーでは複数の背景画像を使用できることを忘れないでください ( caniuse.com のブラウザーでの採用を参照してください)。

ただし、リストした2番目の例では1つの大きなpngを使用しています。この場合、必要な最小限の色のみを使用していることを確認し、http://imageoptim.com/のようなものでできる限り画像を圧縮する必要があります。

于 2013-10-30T14:12:01.390 に答える