5

私が作成している Web サイトには、さまざまな時間に表示される約 100 個のさまざまなサムネイル (64x64) があります。ページによっては、サムネイルが 5 ～ 15 個しか表示されない場合があります。他のものでは、100 個すべてがロードされます。

CSS スプライトのような手法を使用して画像を表示することを検討しています。つまり、親指ごとにイメージ タグを付けるのではなく、次のようにします。

<span class=thumb1"></span>

次に、CSS を使用して、すべての親指をつなぎ合わせた 1 つの画像のスライスを取得します。つまり、100 個のサムすべてを含む 1 つの画像 (このシナリオでは、640x640 の画像)。

私の質問:

  • これは良い考えですか？
  • はいの場合、画像が表示されるすべてのページでそれを行うべきですか、それともすべての画像を含むページでのみ行うべきですか?
  • 単純に img タグで画像を含めるよりも優れたスプライト以外の手法はありますか?
4

3 に答える 3

8

通常のユーザーがこれらのサムネイルを使用して少なくとも 2 つの異なるページにアクセスすると思われる場合は、スプライトを使用することは本当に良い考えだと思います。

実際、すべてのサムネイルを含む 1 つの大きな画像を作成し、それをすべてのページで使用します。

なんで？

  • http リクエストが少なくなります (100 から 1 に)! これは、Web サイトの最適化に関する最も重要なことの 1 つです ( Yahoo パフォーマンス チームの速度最適化ルールからここを読んでください) 。
  • このようにして、ユーザーは最初だけ画像全体をダウンロードし、その後のすべてのページでその画像をすばやくロードできます。
  • インターネット上で最も有名なウェブサイトはすでにそれを行っています! Yahoo、Amazon、またはYoutubeのページで使用されているスプライトを参照してください。
  • スプライトに他の UI またはレイアウト画像を追加できます

結果の PNG を最適化します。

スプライトを生成した後、PNG の場合は、次のツールを使用して PNG をさらに最適化できます: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-あなたのpng/

スプライトを使用しない場合:

  • スプライト内の画像の一部が頻繁に変化する場合
  • この特定のケースでは: 大多数のユーザーが画像の (約) 10% 未満しか必要としない場合
于 2010-01-18T00:15:07.497 に答える
2

「スプライト」の意味はよくわかりませんが、これが意味だと思います。100枚の画像を個別に作成する代わりに、10x10のラスターで1枚の画像を作成します。各座標（x、y）には、表示したい画像の1つが含まれています。ここで、画像を表示する場合は、CSSを使用してbackground-locationを設定します。つまりx * -64px、y * -64pxJavaScriptを使用して各画像スパンのxとyを計算するか、サーバーサイドスクリプトを使用して動的CSSを出力します。

  • はい、これは良い考えです。何百もの小さな画像ではなく、1つの大きな画像をダウンロードするだけでよいため、読み込み時間が短縮されます。
  • 場合によります。ページのキャッシュ機能がある場合は、すべてのサムネイルを1つの画像ファイルに「ステッチ」できます。非常に動的なWebページを使用している場合、サムナルが更新されるたびにこのステッチされた画像を作成するのは非常に困難です。
  • わからない、これが「スプライト」でメンションするものである場合、いいえ、「スプライト」で他の何かをメンターする場合、はい：この答えはその一例です。
于 2010-01-17T22:07:08.200 に答える
2

次の場合は良い考えです

  • スピードが重要

  • アクセシビリティについては気にしません（画像のALTテキストを読むスクリーンリーダーなど、スプライトを使用するとすべて消えます）

  • サムネイルがどのブラウザでもデフォルトで印刷されないことを気にする必要はありません

  • メンテナンスの悪夢になることなくそれを行うことができます（どの画像が再び461位にありましたか？）

2番目の質問に関しては、ロード時間を最小限に抑えるために、すべてのスプライトを1つまたは非常に少数のコンテナーイメージに配置することをお勧めします。

于 2010-01-17T22:08:21.750 に答える