Das Konzept der Sprites gibt es schon seit einiger Zeit. Es ist eine der am häufigsten verwendeten Techniken in der Spielebranche, um das Anzeigen von Animationen auf einem Bildschirm zu beschleunigen. In diesem Artikel werden wir insbesondere untersuchen, wie diese Technik uns helfen kann, die Benutzererfahrung auf Webseiten mithilfe von CSS Sprites in der folgenden Reihenfolge zu verbessern:
- Was ist ein Sprite?
- Was ist CSS Sprite - ein kurzer Überblick?
- Beispiel, wie es in der Webentwicklung hilft?
- Vorteile der Verwendung von CSS-Sprites
- Was muss ein Entwickler tun, wenn er mit CSS Sprites arbeitet?
- Wie erstelle ich ein CSS Sprite Sheet?
- Wie arbeite ich mit CSS Sprites?
- Unternehmen, die CSS Sprites verwenden
Was ist ein Sprite?
Ein Sprite ist ein einzelnes Bild, das Teil einer größeren Szene in einem Spiel ist. Mehrere Sprites werden dann zu einem großen Bild kombiniert, das als Sprite Sheet bezeichnet wird. Sobald ein Sprite-Blatt in den Speicher geladen wurde, werden verschiedene Sprites schnell hintereinander gerendert, um die Illusion einer Animation zu erzeugen. Dies geschieht gleichzeitig für zehn bis Hunderte verschiedener Sprites, um eine Szene im Spiel zu erzeugen.
Die Grundidee ist, dass es viel schneller ist, ein Bild zu laden und einen Teil davon anzuzeigen, wo immer dies erforderlich ist, als mehrere Bilder zu laden und anzuzeigen.
Was ist CSS Sprite: Ein kurzer Überblick?
Ein CSS-Sprite ist eine Technik, die häufig von Webentwicklern verwendet wird, um die Leistung von Webseiten zu optimieren. Bei dieser Technik werden mehrere kleinere Bilder, die normalerweise die gleichen Abmessungen haben, zu einem einzigen großen Bild kombiniert, das als a bezeichnet wird Sprite Sheet oder Fliesenset . Dieses Sprite-Blatt wird dann verwendet, um einzelne Elemente dort anzuzeigen, wo wir sie benötigen.
Ausnahmebehandlung in pl sql
Normalerweise sind Elemente wie Logos, Navigationspfeile und Schaltflächen im Sprite-Blatt enthalten, da sie fast die gleichen Abmessungen haben und häufig auf einer Webseite verwendet werden.
Beispiel, wie es in der Webentwicklung hilft?
Im Allgemeinen werden beim Entwerfen von Webseiten Bilder gespeichert und als einzelne Dateien verwendet. Wenn ein Benutzer eine Webseite öffnet, muss der Browser für jede dieser Dateien eine HTTP-Anfrage stellen, sie separat herunterladen und anzeigen. Dies führt zu höheren Ladezeiten für Seiten, da eine bestimmte Webseite eine große Anzahl kleinerer Bilder wie Schaltflächen, Symbole und Logos enthalten kann.
CSS-Sprites helfen den Entwicklern, diese häufig verwendeten kleinen Bilder zu einem großen Bild zu kombinieren. Der Browser muss dann nur eine Datei herunterladen, die dann verwendet wirdZeigen Sie den gewünschten Abschnitt an, indem Sie das Bild versetzen.
Vorteile der Verwendung von CSS-Sprites
Die Verwendung von CSS-Sprites bietet zwei Hauptvorteile gegenüber normalen Bildern:
Schnelleres Laden der Seite: Erhöht die Ladezeit der Seite, da die auf der Webseite verwendeten Bilder angezeigt werden, sobald das Blatt heruntergeladen wird.
Höherer Durchsatz und geringerer Ressourcenverbrauch: Nicht nur diese Technik verbessert die Endbenutzererfahrung, indem das Laden der Seite beschleunigt wird.Es reduziert aber auch die Überlastung des Netzwerks, da weniger HTTP-Anforderungen gestellt werden.
Was muss ein Entwickler tun, wenn er mit CSS Sprites arbeitet?
Bei der Arbeit mit einzelnen Bildern kann der Entwickler einfach mit HTML-Tags arbeiten und formatieren Sie es bei Bedarf in CSS. Bei der Arbeit mit CSS Sprites muss ein Entwickler jedoch zwei spezifische Dinge tun:
- Erstellung von Sprite Sheet
Wenn der Entwickler beim Entwickeln einer Webseite CSS-Sprites verwendet, muss er zuerst das Sprite-Blatt erstellen, indem er alle gewünschten Elemente wie Schaltflächen, Logos usw. in einem gitterartigen Muster zusammenführt. Dies kann mit jedem Bildbearbeitungsprogramm wie Photoshop oder Gimp erfolgen. Es gibt auch viele Online-Tools, mit denen Sie das Sprite-Sheet erstellen können. Diese Tools werden später in diesem Artikel erläutert.
- Greifen Sie mit dem auf ein bestimmtes Element des Sprites zu CSS Hintergrundposition Eigentum
Sobald das Sprite-Blatt fertig ist, muss der Entwickler CSS-Attribute verwenden, um auf verschiedene Teile des Blattes zuzugreifen.
- Breite: Breite des Sprites
- Höhe: Höhe des Sprites
- Hintergrund: Verweis auf das Sprite-Blatt
- Hintergrundposition: Versatzwerte (in Pixel), um nur auf den erforderlichen Teil des Sprite-Blattes zuzugreifen
Wie erstelle ich ein CSS Sprite Sheet?
Sie können jede Bildbearbeitungssoftware verwenden, um Ihre kleineren Bilder in einem Raster anzuordnen. Im Folgenden werden jedoch zwei einfachere Methoden erläutert:
1. Online-Tool zur Erstellung von Sprite-Blättern
VERKNÜPFUNG: toptal.com/developers/css/sprite-generator/
Dieses Tool ist nicht nur kostenlos zu verwenden, sondern bietet Ihnen auch den erforderlichen CSS-Code, der beim Verweisen auf das Sprite-Blatt verwendet werden kann. Sie können auch mit verschiedenen Eigenschaften wie dem Auffüllen zwischen den Elementen und dem Ändern ihrer Ausrichtung herumspielen.
2. Sprite Sheet mit Sprity generieren
Wenn Sie Grunt, Node oder Gulp verwenden, können Sie ein Paket namens Sprity installieren, mit dem Sie ein Sprite-Blatt in verschiedenen Formaten wie PNG, JPG usw. erstellen können.
Zunächst müssen Sie Sprity installieren mit:
npm install sprity -g
Verwenden Sie dann zum Generieren eines Sprite-Blatts den folgenden Befehl:
sprity ./output-directory/ ./input-directory/*.png
Wie arbeite ich mit CSS Sprites?
In diesem Beispiel verwenden wir das folgende Sprite-Sheet:
Wie Sie im obigen Bild sehen können, wurden sechs Symbole (Instagram, Twitter und Facebook) in einem gitterartigen Muster angeordnet. In der ersten Zeile haben wir einen normalen Zustand und in der zweiten Reihe haben wir ihren Schwebezustand (das Bild, das angezeigt wird, wenn wir den Mauszeiger darauf bewegen).
Wenn Sie das Sprite-Blatt mit den oben beschriebenen Tools erstellt haben, kennen Sie bereits die im CSS erforderlichen Offsets. Wenn Sie jedoch ein anderes Tool verwendet haben oder einfach ein Sprite-Blatt erhalten haben, machen Sie sich keine Sorgen, wir werden eine Methode diskutieren, die hilft Ihnen dabei, Offsets für das gewünschte Element zu erhalten.
Sehen wir uns jetzt eine sehr einfache Möglichkeit an, mithilfe von MS Paint die erforderlichen Offsets für jedes der sechs Symbole zu erhalten. Es ist möglicherweise keine ideale Lösung, um mit Sprites zu arbeiten. Da es jedoch über die Funktion verfügt, die die Koordinaten des Mauszeigers bereitstellt, können die erforderlichen X- und Y-Koordinaten abgerufen werden.
Öffnen Sie zunächst Ihr Sprite-Blattbild (Raster mit allen kleineren Bildern) und bewegen Sie den Mauszeiger in die obere linke Ecke des Sprites, das Sie erfassen möchten.
Sobald Sie die Koordinaten des oberen linken Punkts Ihres Sprites (Instagram-Bild oben links) festgelegt haben, können Sie dieses spezielle Sprite mithilfe des CSS-Codes bei Bedarf anzeigen:
Hintergrund: URL ('img_sprites.png')
Hintergrundposition: 0 0
Breite: 125px
Höhe: 125px
Wir verwenden Breite und Höhe als 125 Pixel, da unsere Symbole diese Dimension haben. Um das nächste Bild (Twitter) in derselben Zeile abzurufen, verwenden wir den folgenden Code:
Hintergrund: URL ('img_sprites.png')
Hintergrundposition: -128px 0px
Breite: 125px
Höhe: 125px
Beachten Sie das Hintergrundpositionsattribut im obigen Snippet. (-128px, 0) bedeutet, dass wir unser Sprite-Blatt um 128 Pixel (unter Berücksichtigung der Auffüllung zwischen Elementen) und 0 Pixel auf der Y-Achse nach links verschieben. Wenn wir auf das Twitter-Hover-Symbol zugreifen würden, wäre unser Hintergrundpositionsattribut:
Hintergrundposition: -128px -128px
Auf diese Weise können wir jetzt mit CSS auf jede Komponente unseres Sprite-Blatts zugreifen. Lassen Sie uns einen vollständigen HTML- und CSS-Code durchgehen.
Schritt 1: Schreiben des erforderlichen HTML-Codes
Im folgenden Code fügen wir einfach drei Links hinzu. Außerdem werden wir unseren HTML-Code mit dem Stylesheet (screen.css) verknüpfen.
Schritt 2: Schreiben Sie das erforderliche CSS. Zuerst werden wir unsere gemeinsame Symbolklasse gestalten. Hier sehen Sie, dass wir auf das von uns erstellte Sprite-Sheet verweisen.
/ * Geteiltes Symbol Klasse * /
span.icon eine Verbindung,
span.icon a: besucht{
Anzeige::Block
Texteinzug::-9999px
Hintergrundbild: url (./ img_sprites.png)
Hintergrund Wiederholung::keine Wiederholung
}}
Schritt 3: Abrufen der einzelnen Symbole aus dem Sprite-Blatt mithilfe der Offsets.
/ * Instagram Icon * /
span.instagram eine Verbindung,
span.instagram a: besucht{
Breite::125px
Höhe::125px
Hintergrundposition::0 0
}}
/ * Twitter Icon * /
span.twitter eine Verbindung,
span.twitter a: besucht{
Breite::125px
Höhe::125px
Hintergrundposition::-128px 0
}}
/ * Facebook Icon * /
span.facebook eine Verbindung,
span.facebook a: besucht{
Breite::125px
Höhe::125px
Hintergrundposition::-257px 0
Wie benutzt man Logger in Java?
}}
Schritt 4: Abrufen der Hover-Symbole aus dem Sprite-Blatt mithilfe der Offsets.
span.instagram a: schwebe{Hintergrundposition::0 -128px}}
span.twitter a: schwebe{Hintergrundposition::-128px -128px}}
span.facebook a: schwebe{Hintergrundposition::-255px -128px}}
Unternehmen, die CSS Sprites verwenden
Viele große Namen in der Branche verwenden CSS Sprites, um die Reaktionsfähigkeit ihrer Websites zu verbessern. Unternehmen wie Google, Facebook und Amazon verwenden diese Methode in großem Umfang, da sie so die Anzahl der HTTP-Anforderungen pro Sitzung für einen bestimmten Benutzer reduzieren können. Dies ist ein großer Vorteil, wenn wir berücksichtigen, dass diese Unternehmen zu jedem Zeitpunkt Millionen von Kunden bedienen.
Jetzt, da Sie wissen, was CSS-Sprites sind und wie Sie damit arbeiten, sind Sie auf Ihrem Weg zum Erlernen von CSS einen Schritt näher gekommen. Konzepte wie Sprites sind heutzutage ein Grundpfeiler, da es für Entwickler äußerst wichtig geworden ist, jede Leistung von einer Webseite zu extrahieren.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „HTML Images“ und wir werden uns bei Ihnen melden.