CSS Sprites: Was sie sind, warum sie cool sind und wie man sie verwendet

Dieser Artikel wurde seit seiner Erstveröffentlichung im Jahr 2007 mehrmals überarbeitet und neu geschrieben, um die Informationen aktuell zu halten. Die jüngste Überarbeitung wurde von Flip Stewart im Januar 2015 vorgenommen.

Was sind CSS Sprites?

Spoiler-Alarm: Es sind keine Feen, die deine Stylesheets für dich schreiben. Ich wünschte. Kurz gesagt: CSS Sprites sind eine Methode, um mehrere Bilder in einer einzigen Bilddatei für die Verwendung auf einer Website zu kombinieren, um die Leistung zu verbessern.

Sprite mag wie eine kleine Fehlbezeichnung erscheinen, wenn man bedenkt, dass man ein großes Bild erstellt, anstatt mit vielen kleinen zu arbeiten, aber die Geschichte der Sprites, die bis ins Jahr 1975 zurückreicht, sollte die Dinge klarstellen.

Zusammenfassend: Der Begriff „Sprites“ stammt von einer Technik in der Computergrafik, die am häufigsten in Videospielen verwendet wird. Die Idee war, dass der Computer eine Grafik in den Speicher laden konnte und dann nur Teile dieses Bildes auf einmal anzeigte, was schneller war, als ständig neue Bilder laden zu müssen. Das Sprite war die große kombinierte Grafik.

CSS Sprites basieren auf derselben Theorie: Lade das Bild einmal, verschiebe es und zeige nur Teile davon an. Dies reduziert den Aufwand, mehrere Bilder laden zu müssen.

Warum CSS Sprites verwenden?

Es mag kontraintuitiv erscheinen, kleinere Bilder in ein größeres Bild zu stopfen. Würden größere Bilder nicht länger zum Laden brauchen?

Schauen wir uns einige Zahlen an einem tatsächlichen Beispiel an

Bild	Dateigröße	Dimensionen
canada.png	1.95KB	256 x 128
usa.png	3.74KB	256 x 135
mexico.png	8.69KB	256 x 147

Das ergibt eine Gesamtgröße von 14.38KB zum Laden der drei Bilder. Die drei Bilder in einer einzigen Datei wiegen 16.1KB. Das Sprite ist letztendlich 1.72KB größer als die drei separaten Bilder. Das ist kein großer Unterschied, aber es muss einen guten Grund geben, diese größere Datei zu akzeptieren ... und den gibt es!

Während die Gesamtbildgröße (manchmal) mit Sprites ansteigt, werden mehrere Bilder mit einer einzigen HTTP-Anfrage geladen. Browser begrenzen die Anzahl der gleichzeitigen Anfragen, die eine Website stellen kann, und HTTP-Anfragen erfordern ein bisschen Handshaking.

Daher sind Sprites aus denselben Gründen wichtig, aus denen das Minifizieren und Zusammenfassen von CSS und JavaScript wichtig ist.

Wie verwendet man CSS Sprites?

Hier ist ein Beispiel-Sprite, bei dem drei verschiedene Länderflaggen zu einem einzigen Bild kombiniert wurden

Du definierst dasselbe background-image für mehrere CSS-Klassen und legst die Hintergrundposition und die Abmessungen der einzelnen Klassen fest, um einen einzelnen Teil des Sprites anzuzeigen. Hier ist etwas Code, der das Konzept demonstriert

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

Wenn du denkst, dass es einen Weg geben muss, dies zu automatisieren, damit du diese Sprites nicht manuell erstellst und dann dein Stylesheet anpasst, um übereinzustimmen, hast du Recht, und du hast Glück!

Sprites mit Grunt / Gulp / Node generieren

Wenn du Grunt, Gulp oder Node im Allgemeinen verwendest, ist css-sprite (jetzt sprity genannt) ein wunderbares Node-Paket, das Sprites aus einer Gruppe von Bildern erstellt. Sprity hat viele großartige Funktionen, darunter die Formatierung der Ausgabe als PNG, JPG (oder Data URIs davon) und die Stylesheet-Generierung in CSS, LESS, Sass und Stylus.

Um Sprites über die Kommandozeile zu kompilieren, installiere css-sprite global mit

$ npm install sprity -g

Führe dann Folgendes aus, um Sprites und das entsprechende Stylesheet zu generieren

$ sprity ./output-directory/ ./input-directory/*.png

Weitere Informationen zur Verwendung von css-sprite mit Grunt oder Gulp (oder vielen anderen Umgebungen) findest du im Repository des Projekts auf GitHub.

Sprites mit Compass generieren

Das Generieren von Sprites mit Compass erfordert etwas zusätzlichen Einrichtungs- und Wartungsaufwand, aber wenn du bereits Compass verwendest, passt es gut in deinen bestehenden Workflow.

Beginne damit, ein Verzeichnis in deinem `images`-Verzeichnis zu erstellen (ja, es muss sich im `images`-Verzeichnis befinden, um zu funktionieren) mit einem Namen, der den Sprites entspricht, die du erstellen möchtest. Stelle sicher, dass die Bilder, die du in Sprites konvertierst, PNGs sind, und lege sie in dein neues Verzeichnis. Ich erstelle Flaggensprites, also habe ich mein Verzeichnis flags genannt und drei PNGs in das Verzeichnis gelegt.

In einer neuen SCSS-Datei, die ich `flags.scss` genannt habe (der Name hier ist nicht wichtig), werden die folgenden drei Zeilen nacheinander die Sprite-Erstellungstools von Compass importieren, die PNGs, die in Sprites konvertiert werden sollen, glob-importieren (beachte, dass der Pfad hier images/ nicht enthält) und dann das CSS für die Sprites generieren. Beachte, dass das mittlere Wort der @include-Anweisung mit dem Verzeichnis in der Zeile davor übereinstimmen muss.

@import "compass/utilities/sprites";
@import "flags/*.png";
@include all-flags-sprites;

Dies ist ein ziemlich einfacher Prozess zum Generieren von Sprites, hat aber einige Nachteile/Eigenheiten

• Das generierte CSS enthält keine Breiten oder Höhen für die Sprites.
• Es gibt keine gemeinsame Klasse zwischen den Sprites; das background-image wird auf jede Klasse angewendet.

Sprites mit ImageMagick generieren

ImageMagick kann verwendet werden, um ein Spritesheet über die Kommandozeile mit den folgenden Befehlen zu erstellen

convert *.png -append sprites.png # append vertically
convert *.png +append sprites.png # append horizontally

Dadurch werden alle durch den Glob ausgewählten PNG-Dateien verkettet und in einer einzigen Datei zusammengefasst, aber es wird nicht das entsprechende Stylesheet erstellt. Wenn du ImageMagick zum Erstellen deiner Sprites verwendest, solltest du den folgenden Abschnitt über die Verwendung von Sprite Cow lesen.

Sprite Cow mit deinen Sprites verwenden

Sprite Cow ist ein gehostetes Tool zum Generieren eines Stylesheets, das deinen Sprites entspricht. Es erstellt das Sprite nicht für dich, sondern hilft dir lediglich dabei, die Zahlen zu erhalten, die du zum Verwenden des Sprites benötigst (die Breite, Höhe und background-position der einzelnen Teile des Sprites). Es bietet 2x-Bildkompatibilität und eine einfache Benutzeroberfläche, um schnell festzulegen, welche Bereiche des Sprites jedes Bild ausmachen, um CSS zu erstellen. Du klickst einfach auf den Teil, den du benötigst, und es gibt dir das CSS, das du brauchst.

Sprites mit Spritepad generieren

Spritepad ist eine weitere gehostete Lösung zum Erstellen von Sprites. Mit Spritepad lädst du einzelne Bilder hoch, positionierst sie nach Belieben, und das CSS wird in Echtzeit aktualisiert. Wenn du fertig bist, lade das Bild herunter und kopiere das CSS in dein Projekt.

Sprites mit SpriteMe generieren

SpriteMe ist ein Bookmarklet, das ein Sprite basierend auf dem generiert, was es auf der aktuellen Seite findet. Du würdest also im Grunde entwickeln, ohne Sprites zu verwenden, und dies dann am Ende verwenden, um Dinge zusammenzufügen. Hier ist ein Workflow, der erklärt, wie das funktionieren würde.

Sollen meine Sprites horizontal oder vertikal sein?

Eine Option ist keins von beiden. Komprimiere sie in einem Raster, um die kleinstmögliche dimensionale Größe zu erreichen. Die dimensionale Größe eines Bildes spielt eine Rolle dabei, wie viel Speicher das Bild bei der Verwendung belegt, also je weniger, desto besser. Wenn du dein eigenes Sprite erstellst, ist Sprite Cow ein gutes Tool, um beim Generieren des CSS zu helfen.

Wenn du dich aus Einfachheitsgründen für das eine oder andere entscheidest, kannst du dir die größte Breite und die größte Höhe deiner Bilddateien ansehen. Wenn die größte Breite größer als die größte Höhe ist, sollte das Spritesheet horizontal angeordnet werden. Wenn die größte Höhe größer als die größte Breite ist, vertikal. Wenn du ein Generierungstool verwendest, trifft dieses diese Wahl im Allgemeinen für dich.

In einigen Situationen kann es tatsächlich sinnvoll sein, ein Sprite diagonal anzuordnen. Dies kann es ermöglichen, ein Sprite in einem Bereich unbekannter Breite und Höhe zu verwenden, was ziemlich cool ist.

Obwohl eine andere mögliche Möglichkeit, dies zu umgehen, die Verwendung eines Pseudoelements ist.

Alternativen

Es gibt einige Alternativen zu CSS Sprites, aber, wie du vielleicht erwartest, haben sie alle ihre eigenen Vor- und Nachteile.

Data URIs

Data URIs ermöglichen es dir, die Bilddaten direkt in ein Stylesheet einzubetten. Dies vermeidet zusätzliche HTTP-Anfragen für Bilder, was im Grunde dasselbe ist wie ein Sprite, nur ohne die ausgefallene Positionierung.

Icon Fonts

Icon Fonts ähneln Sprites insofern, als dass sie dasselbe erreichen: das Kombinieren mehrerer Bilder zu einer einzigen Anfrage.

SVGs

SVG-Bilder können ebenfalls zu einem Sprite kombiniert und als Icon-System verwendet werden. Es ist jedoch ein etwas anderer Ansatz, der die Syntax und Stärken von SVG nutzt. Du musst jedoch möglicherweise über ein Fallback-System nachdenken, da SVG nicht über die gleiche tiefe Browserunterstützung verfügt wie CSS background-image (das im Grunde überhaupt keine Browserunterstützungsprobleme hat).

Grunticon und Iconizr sind Möglichkeiten für die Arbeit mit SVG-Sprites, die bei den Fallbacks helfen.

Verwenden von <img> und object-position

Robin Rendle hat einen großartigen Beitrag zu dieser cleveren Technik hier.

Beispiele

• Mozilla Developer Network verwendet Sprites, um zwischen verschiedenen Zuständen zu wechseln, wenn sie ihre Navigation auf oberster Ebene umschalten.
  

  

• Mailchimp verwendet Sprites (background-image SVG) für ihre Seitenleistennavigation in verschiedenen Zuständen.
  

  

• Mapbox verwendet einen Icon Font für ihre kleineren Icons, die auf der gesamten Website verwendet werden, aber verwendet Sprites mit ziemlich hoher Auflösung für soziale Medien und Presse-Logos
  

  

Weitere Lektüre

• CSS Image Sprites im Mozilla Developer Network
• CSS Sprites mit Hintergrundpositionierung im Treehouse Blog
• CSS Sprite Sheets: Best Practices, Tools and Helpful Applications auf Tuts+
• CSS Sprite Sheet Animations mit steps() im Treehouse Blog