一部が表示されないべきで塞ぐようにCSSスプライトは、一般的にのみ、内部固定サイズの箱（ボックス）を使用します。
1.利点
1、CSSスプライトを使用するだけでなく、HTTPはWebページを要求減らすことができ、大幅にも幅広い普及とアプリケーションのための主な理由である最大の利点スプライトCSS、あるページのパフォーマンスを向上させること;
2、CSSスプライトをすることができます画像のバイトを低減、繰り返し一つの画像バイトに三つの画像を比較し、画像のこれらの3バイトの和よりも常に小さいです。
3は、絵の命名でのWebデザイナー、その上に絵姓のちょうどコレクションで問題を解決するために、それによって、ウェブページの生産効率を向上させること、どんな小さな要素にちなんで命名されている必要はありません。
4、便利な交換用のスタイルは、ちょうど絵の絵以下の色やスタイルを変更し、ページ全体のスタイルを変更することができます。メンテナンスがより便利に。
2.欠点
絵の合併は、複数の画像を使用すると、1枚の絵にまとめ秩序と合理的にしたい、だけでなく、不要なバックグラウンドがセクタに表示されないようにするだけでなく、十分なスペースを滞在する1、;これら幸いなことに、ほとんどの痛みを伴います;適応ワイドスクリーン、高解像度の画面でページをあなたの写真が十分広くない場合は、バックグラウンドを破壊する傾向があり
、一般的に両刃の剣である保守性、など2、。一部の人々は、すべての画像が削除またはコンテンツを追加するには、このイメージを変更しなければならなかったので、それは少し面倒なようで、何人かの人々がそれを好きではない、それを好むことがあります。そして、画像・カウント（特にこの図では、数千のピクセル）の場所はかなり不快なものです。もちろん、パフォーマンスのスローガンの下、これらを克服することができます。
図3に示すように、画像の位置は、柔軟性等の中心を失った絶対値に固定する必要があるため。
図4に示すように、我々はまた、先に述べたように、それ以外の状況ピクチャ干渉が発生する可能性があり、CSSスプライトを使用するために、ボックスのサイズを制限する必要があります。これは、非一方向のタイル張りの背景とページズームのニーズを必要とするいくつかの例では、CSSスプライトが適切でないことを意味します。YUIのソリューションを使用すると、スケーリング限界を保つことができるので、画像間の距離を大きくすることです。
3.CSSスプライト画像硝子体切除
1は、上から下へのCSSスプライト画像シーケンス一緒に写真は、追加左から右へ。通常のbackground-position組み合わせデジタルポジショニング、メンテナンスが不要なトラブルをもたらすために低減することができます。
ファイルサイズがファイルサイズの増加に伴って増加するので、図2に示すように、一定の距離CSSスプライト画像を維持することが推奨されていません。
図3に示すように、同じ色の組み合わせや画像ファイルのサイズが小さい色の比較的小さな数になるので、色の数を減らすことができる近接にCSSスプライト画像。
CSSスプライトの画像がギャップを持っていないので4、ほとんどの場合、ある程度の大きなギャップを残して、同じサイズCSSスプライト画像は、サイズが大きくなります。
図5に示すように、同じ画像サイズCSSスプライト、垂直に配置された画像のファイルサイズは、水平配置よりも大きくなります。
図6に示すように、CSSスプライト画像は、水平方向に整列された画像ファイルのサイズは、垂直よりも大きくなるように配置されています。
図7に示すように、画像の合併：CSSスプライト画像を適用して、適切に同じ画像の等合わせて、スペースを節約するために体積が減少しました。
現在のユーザは、1つの状態または表示つのみレベル、合わせ他のピクチャの必要レベルまたは状態と判定された場合：図8は、マージされた画像を区別する必要がありません。
9、ゴールド切断：右端またはCSSスプライト画像は他の介入ではありませんので、テキストの前に置かれ、ほとんどの精神的な活動で最も適切な場所アイコンのCSSスプライト画像の左には、一定の線幅を確保する必要はありません。