CSS スプライトのような興味深いツールを詳しく見てみましょう。経験豊富なレイアウト デザイナーや Web マスターの多くは、このシンプルなテクニックの利点をよく知っています。スプライトを使用する利点は、個々の画像の数が減ることでページの読み込み時間が大幅に短縮されることです。最新のレイアウト標準では、小さなアイコンとテーマ画像を特別な画像コレクションにグループ化するのが通例です。簡単に言えば、スプライトとは、テーマの小さな画像のセットを含む画像です。

このようにして、小さな画像をグループ化すると、サーバーへのリクエストの数が減ります。私たちのページには、30 個の小さな画像ではなく、1 つの画像だけが読み込まれます。これにより、読み込み速度が大幅に向上します。

一言で言えば、CSS スプライトは、ウェブサイトで使用するために複数の画像を 1 つのファイルに結合してパフォーマンスを大幅に向上させるツールです。 スプライトの概念は、小さな画像を扱うのではなく、大きな画像を作成することを考えると、少し誤解を招きやすいように思えるかもしれません。

要約すると、「スプライト」という用語は、ビデオ ゲームで最もよく使用されるコンピュータ グラフィックス技術に由来しています。 このアイデアは、画像をメモリに保存し、その画像の一部だけを表示することであり、新しい画像を取得するよりも高速です。

CSS スプライトは、ほぼ正確な理論です。画像を 1 回取得し、背景を移動して、その一部のみを表示します。 これにより、複数の画像を取得する際のオーバーヘッドが軽減されます。

インターネット上には、スプライトを作成するためのサービスが膨大にあります。検索エンジンに適切なクエリを入力するだけです。検索するのが面倒な場合は、このトピックに関する人気のあるリソースをいくつか紹介します。 トップタル スプライト ジェネレーター、 inettools スプライト ジェネレーター。テンプレートを分割し、小さなアイコンをすべて選択し、そこからスプライトを作成したとします。次に何をするのでしょうか?

スプライトからアイコンを使用する方法

次に、スプライトを操作する手順を見てみましょう。

• 一般的なクラスを作成しましょう。たとえば、.sprite と呼びます。その背景は、sprite.png ジェネレータを使用して作成されたこの画像です。同じクラスに高さと幅を設定します。スプライト アイコンが同じサイズの場合、これがスプライト アイコンの高さと幅になります。
• このアイコンを使用する必要があるブロックの場合は、CSS プロパティ background-position を使用して背景オフセットを希望の量に設定します。 背景について詳しくは、前の記事をご覧ください。

例:

.sprite {
 幅: 30px;
 高さ: 30px;
 背景: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 背景位置: 0 -80px;
}

お疲れ様でした