Sehen wir uns ein so interessantes Tool wie CSS-Sprites genauer an. Viele erfahrene Layouter und Webmaster sind sich der Vorteile dieser einfachen Technik bewusst. Der positive Aspekt der Verwendung von Sprites besteht darin, dass die Ladezeit der Seite durch die Reduzierung der Anzahl der Einzelbilder erheblich verkürzt wird. In modernen Layoutstandards ist es üblich, kleine Symbole und Themenbilder in einer speziellen Bildsammlung zu gruppieren. Einfach ausgedrückt ist ein Sprite ein Bild, das eine Reihe kleiner Bilder eines Themas enthält.

Auf diese Weise reduzieren wir beim Gruppieren kleiner Bilder die Anzahl der Anfragen an den Server. Unsere Seite lädt nur ein Bild statt 30 kleine. Dies führt zu einer erheblichen Steigerung der Ladegeschwindigkeit.

Kurz gesagt: CSS-Sprites sind ein Tool zum Kombinieren mehrerer Bilder in einer einzigen Datei zur Verwendung auf einer Website, um die Leistung erheblich zu verbessern. Das Konzept von Sprite mag etwas irreführend erscheinen, wenn man bedenkt, dass Sie ein großes Bild erstellen, anstatt mit kleinen zu arbeiten.

Zusammenfassend: Der Begriff „Sprites“ stammt von einer Computergrafiktechnik, die am häufigsten in Videospielen verwendet wird. Die Idee bestand darin, ein Bild im Speicher zu speichern und dann nur einen Teil dieses Bildes anzuzeigen, was schneller war als das Abrufen neuer Bilder.

CSS Sprites ist so ziemlich die genaue Theorie: Holen Sie sich das Bild einmal, verschieben Sie den Hintergrund und zeigen Sie nur Teile davon an. Dies reduziert den Aufwand beim Abrufen mehrerer Bilder.

Im Internet gibt es eine Vielzahl von Diensten zum Erstellen von Sprites. Sie müssen lediglich die entsprechende Suchanfrage in eine Suchmaschine eingeben. Wenn Sie zu faul zum Suchen sind, finden Sie hier einige beliebte Ressourcen zu diesem Thema. Toptal-Sprite-Generator, inettools-Sprite-Generator. Nehmen wir an, Sie haben Ihre Vorlage zerschnitten, alle kleinen Symbole ausgewählt und daraus ein Sprite erstellt. Was kommt als nächstes?

So verwenden Sie Symbole aus einem Sprite

Sehen wir uns nun die Vorgehensweise für die Arbeit mit einem Sprite an.

• Erstellen wir eine allgemeine Klasse, nennen wir sie beispielsweise .sprite, deren Hintergrund dieses Bild ist, das mit dem Generator sprite.png erstellt wurde. Auf dieselbe Klasse legen wir die Höhe und Breite fest, die der Höhe und Breite der Sprite-Symbole entspricht, wenn sie dieselbe Größe haben.
• Für Blöcke, in denen Sie dieses Symbol verwenden müssen, legen Sie den Hintergrundversatz mithilfe der CSS-Eigenschaft background-position auf den gewünschten Wert fest. Mehr über Hintergründe im vorherigen Artikel.

Beispiel:

.sprite {
 width: 30px;
 Höhe: 30px;
 Hintergrund: url("/assets/img/sprite.png");{{HTML 85}}
}
.sprite-icon1 {
 Hintergrundposition: 0 -80px;
}

Gute Arbeit