画像へのスプライトアプローチの経験はあまりありません（http://www.alistapart.com/articles/sprites）。スプライトと昔ながらのスライスの長所/短所を共有したい人はいますか？
6899 次
10 に答える
12
スプライトの主な利点は、ブラウザがWebサーバーに要求する画像が少なくて済むことです。これにより、HTTPリクエストの数が減り、デザインの一部をより効果的に圧縮できるようになります。これらの2つのポイントは、スライスされた画像の欠点も表しています。
ここでは、スプライトがWebページの読み込み速度をどのように改善するかについていくつかの良い例を見ることができます。
于 2009-07-01T15:32:39.597 に答える
10
長所：
- サーバー上では、多数の小さな画像を提供するよりも、単一の大きな画像を提供する方がはるかに簡単です。
- Web ブラウザがそのような画像をロードする方が (わずかに) 高速です。
- ブラウザーは必要なときにのみ画像を読み込みます。ロールオーバーで複数の画像を使用している場合、要素を初めてロールオーバーしたときにブラウザーが「一時停止」します。これは、ロードする画像が 1 つしかないため、スプライトを使用して解決できます。
短所：
- コーディングするのはちょっと面倒です（少なくとも複数の画像を使用するよりも）
于 2009-07-01T15:36:03.957 に答える
5
CSS スプライトを使用する際に見過ごされがちな欠点の 1 つは、メモリ フットプリントです。
スプライト イメージを慎重に作成しないと、途方もない量の無駄なスペースができてしまいます。私のお気に入りの例は、この画像がスプライトとして使用されているWHIT TV の Web サイトです。これは 1299×15,000 の PNG であることに注意してください。実際のダウンロード サイズは約 26K ですが、ブラウザは圧縮された画像データをレンダリングしません。このイメージをダウンロードして解凍すると、約 75MB のメモリ (1299 * 15000 * 4) を使用します。
スプライトがブラウザに読み込まれると、圧縮されずに保存されます。26 KB のファイルを解凍すると、なんと 75 MB の RAM を消費します。サイズが非常に大きいスプライトを使用する場合は注意が必要です。
また、CSS のサポートが不十分なブラウザー (レガシーブラウザー) で何が起こるかという問題もあります。スプライトが完全に壊れてしまう可能性があります。
于 2009-07-08T05:18:05.580 に答える
4
スプライト
長所：
- サーバーへの HTTP 接続が少ない
- ブロードバンドでの高速読み込み
短所：
- カプセル化なし: 1 つの画像を変更する場合は、スプライトを変更する必要があります
- ツールなしで CSS で個々の画像を設定するのは難しい
- 劣化しない: ブラウザーが CSS をサポートしていない場合、問題が発生します
于 2009-07-01T15:36:52.177 に答える
3
CSSスプライト：
長所：
- サポートされていないブラウザでは正常に機能が低下します（リンクの背景画像が許可されていない場合はテキストが表示される可能性があります）
- HTTPリクエストが少ない
- 各画像にはカラーテーブルのような個別のオーバーヘッドがあるため、画像のスライスにはCSSスプライトよりも多くのオーバーヘッドがあります
短所：
- ブラウザで画像がオフになっていると問題が発生します（まれなケースですが）
画像のスライス：
長所：
- ユーザーは、1つずつロードされるため、より速いロードを認識します。
- ユーザーが画像にマウスを置いたときのように、オンデマンドでロードします
短所：
- サーバー側ではそうではないとしても、クライアント側ではWebページのサイズが大きくなる可能性があります。
于 2009-07-01T15:46:44.230 に答える
1
短所-古いブラウザでは遅くなる/ホバー効果で動作しない可能性があります（opera6）-正しく使用しないと、非常に/大きすぎる可能性があります（適切にグループ化してください！）-設定するのに面倒な作業
長所-1つの大きな画像がすべての個々の画像を組み合わせたもの（1つのヘッダー/カラーテーブル）よりも小さいため、転送されるバイト数が少なくなります-httpリクエストが少なくなります
于 2009-07-01T15:44:33.643 に答える
1
スプライトの主な欠点は、CSS の読み取り/保守/変更が困難になることです。スプライト内の正確なピクセル オフセットを思い出すのは難しい場合があります。
于 2009-07-01T15:34:19.763 に答える
1
スプライトを使用するプロ: すべてに対して 1 つの画像を使用しているため、http サーバーの負荷が少なくて済みます。
短所: - コーディングが難しい。正しく表示できるように、スプライト内の各画像の座標を知っている必要があります。画像のサイズを変更したら、すべてを調整する必要があります... - 画像が大きいと、表示するのに時間がかかるページが作成される可能性があります。画像を使用している間、インターネット接続が遅いユーザーは 1 つずつ見ることができます。
ベストプラクティス。たとえば、画像をロールオーバーするために使用します。
于 2009-07-01T15:41:14.477 に答える
1
CSS スプライト ジェネレーターの使用を検討してください ( SmartSpritesを使用します)。そうすれば、スライスをローカルで実行し、ビルド プロセスでスプライトマップを生成できます。それは両方の長所です。
また、SmartSprites はあなたのためではありません。間違いなく他にもありますが、前もって変更中の作業量を削減できるので気に入っています。
于 2009-07-01T15:44:07.403 に答える
0
私は、すべての画像を 1 つのファイルにまとめるよりも、類似した画像 (通常、ホバー、選択したページ、選択したページの親ページ) をグループ化するという中間の方法を好みます。これらを作成するには、Photoshop や Illustrator で通常のようにスライスをイメージし、ファイルを開いてショートカット キーで結合します。画像を CSS スプライトに結合する Photoshop スクリプトを作成しました。複数の HTTP 接続がありますが、ホバー時の読み込み遅延はありません。
于 2009-07-07T19:28:25.747 に答える