Wie funktionieren denn nun diese CSS-Sprites?

Geschätzte Lesezeit: 3 Minuten

In einem etwas älteren Beitrag habe ich mich des Themas „CSS-Sprites“ schon einmal angenommen. Mit der darin beschriebenen Methode hatte ich sämtliche Grafikelemente meines Themes zu einem Sprite zusammengefasst und entsprechend in die style.css meines Themes eingefügt.

Problem war allerdings, dass das Online-Tool SpriteMe die nachträglich eingebauten Social-Media Buttons in der Sidebar nicht erkannte und so ließ ich die Zusammenfassung dieser Bilder erst einmal außen vor.

Mittlerweile enthält mein Blogtheme nicht mehr viele Grafiken, da ich etliche entfernt bzw. manche durch CSS-Attribute ersetzt habe. Aber ich wollte mich trotzdem noch einmal daran versuchen, die Social Media-Buttons per Sprite-Variante in meinem Blog einzubauen.

Bei der Recherche fand ich Michaels wertvollen Hinweis auf einen tollen CSS-Sprite-Generator. Mit SpridePad und ein bisschen Werkelei war es mir nun endlich möglich, die Sidebar-Grafiken zu einem Sprite zusammen zu fassen.

Erstellen eines Sprites

Zuerst habe ich mir die Buttons horizontal und in der gleichen Reihenfolge, wie ich sie in der Sidebar angeordnet habe, auf der Fläche des Generators platziert. Warum dieses? Das macht es beim Einfügen im Theme einfacher, als wären sie vertikal angeordnet. Ich musste in der Vergangenheit per CSS echte Feinarbeit leisten, damit sich die enthaltenen Grafiken nicht überlappen oder gegebenenfalls noch ein Rand der vorangegangen zu sehen ist.

Meine Empfehlung
Fügt die Bilder nicht zu eng beieinander im Generator ein. Außerdem solltet ihr Sprites vermeiden, die Bilder in sehr unterschiedlichen Größen beinhalten. Legt lieber mehrere Sprites an.

 

 

Wie ihr in dem Video seht, werden während des Vorganges in der Seitenleiste bereits die CSS-Werte angezeigt. Wenn ich alle Grafiken auf der Bearbeitungsfläche platziert habe, kann ich aus der oberen Menüleiste des Generators heraus nun eine zip-Datei herunterladen.

Sprite-Grafik Social Media

 

Diese enthält einmal das fertige Sprite im png-Format …

CSS-Werte

 

… und eine css-Datei mit den entsprechenden Werten für die Platzierung im Theme.

Damit ist doch schon einmal ein guter Grundstein gelegt.

Nun gilt es, beide Vorgaben dem Template hinzuzufügen.

Die CSS-Sprite Grafik

Die Spritegrafik wurde erst einmal per Online-Bild-Tool TinyPNG verkleinert. Die Optimierung macht satte 75 % weniger zu der ursprünglichen Größe aus.

Anschließend habe ich sie per FTP in ein Verzeichnis beispielsweise mit dem Namen „Images“ in eines meiner Blogsverzeichnisses hochgeladen.

CSS-Werte der Grafiken bestimmen

Die vorgegebenen Werte füge ich dann der style.css meines Themes „Smoky“ hinzu. Aber damit ist nur erst einmal ein grobes CSS-Gerüst gelegt. Denn wo genau ihr die Bilder letztendlich einfügen möchtet, müsst ihr dann doch selber bestimmen. Sollen Sie an gleicher Stelle wie vor der Sprite-Erstellung erscheinen, dürfte es mit den ursprünglichen CSS-Werten funktionieren.

Ich hatte allerdings bisher die Buttons per html als Widget im Blog konfiguriert. Nun wollte ich die html-Werte aber direkt in der Datei für die Sidebar (sidebar.php) setzen. Das war vorher wichtig für mich zu wissen, denn dementsprechend musste ich die „restlichen“ CSS-Attribute anpassen.

Als Beispiel zeige ich Euch meine CSS-Einstellungen. Diese sollen natürlich nur als Anhaltspunkt dienen.

In den Zeilen 1-3 wird die Grafik in Eurem Theme hinterlegt. Die nachfolgenden einzelnen Werte (bei mir beispielsweise der Twitter-, Facebook-Button usw.) werden per CSS-Werte optisch angepasst. Es ist nicht noch einmal erforderlich, für jedes einzelne Bild den Verzeichnispfad der Hintergrundgrafik zu benennen.

Grafiken per html positionieren und Verlinkungen erzeugen

Das war eigentlich die größte Herausforderung für mich. Die verlinkten Grafiken einzufügen war recht schnell und einfach vollzogen. Allerdings sollten diese einerseits mit einem alt– und title-Tag versehen und andererseits valide sein. :-) Der Schlüssel, dieses in der sidebar.php hinzubekommen, war dann letztendlich nur noch ein kleiner „li“-tag. ;-)

So sieht dann letztendlich der Code für die verlinkten Social-Media-Buttons in der Sidebar meinem Blog aus:

 

Also wenn man mal ein CSS-Sprite Schritt für Schritt angelegt hat, dann finde ich es eigentlich gar nicht mehr so schwierig – okay, vielleicht etwas zeitaufwändig. Ich hoffe, ich konnte darin eine kleine Hilfestellung bieten. Allerdings nehme ich an, dass in vielen neueren insbesondere Premiumthemes die Grafiken von Haus aus als Sprites angelegt sind.

Edit 29.12.2013

Angeregt durch den Kommentar von hcr habe ich die style.css noch einmal überarbeitet und möchte Euch diese Änderung nicht vorenthalten:

Die „alt“-Tags der Verlinkungen in der sidebar.php habe ich nach seiner Empfehlung entfernt.


Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen, sei es über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

11 Kommentare

Kommentare hinzufügen
    • Hallo hansen,

      Du hast natürlich absolut recht und ich habe das Beispiel dementsprechend geändert. Das Semikolon hatte ich während der Bearbeitung dringelassen, da ich nach und nach die Werte ergänzt hatte.

      Und natürlich kann man am Ende der Bearbeitung die komplette style.css noch einmal per Online-Tool komprimieren. Zur besseren Darstellung hier im Beitrag habe ich aber die Werte pro Zeile erst einmal stehen lassen.

      Lieben Gruß
      Sylvi

  • Hallo! Herzlichen Dank für diese tolle Anleitung. Vor allem die beiden Online-Tools kannte ich noch nicht. Gerade die Erstellung des .png war eine sehr große Hilfe für mich, da ich kein anständiges Grafikprogramm habe und mit Gimp überhaupt nicht zurecht komme. (Photoshop ist mir als privater Anwender einfach zu teuer ;) )

    • Hej Luigi,

      ich muss gestehen, dass ich lange Zeit mit dem Thema „CSS-Sprites“ nicht wirklich etwas anfangen konnte. Aber dank der tollen Tools ist es ja mittlerweile ein Kinderspiel geworden, so dass selbst ich es endlich verstanden habe. ;-)

      Stimmt, mit Gimp kam ich auch überhaupt nicht klar. Mein Lieblingsbildbearbeitungsprogramm ist PhotoImpact X3. Diese Software begleitet mich nun seit Windows XP und selbst mit Windows 8.1 läuft es noch einwandfrei. Ich habe leider noch keine kostenlose Variante dieses Programms gefunden, obwohl es nicht mehr taufrisch ist und Corel selber bietet es nicht mehr an.

      Ansonsten kann ich noch PaintNet (kostenlos) empfehlen.
      Ich denke, Du hast Irfan View auf Deinem Rechner. Dafür gibt es ein tolles Plugin namens Riot, mit dem man Bilder – sei es .png, .gif und .jpg – wunderbar optimieren kann. Ich habe in diesem Beitrag ein wenig darüber berichtet. :-) Riot ist übrigens auch als Einzelsoftware erhältlich.

      Lieben Gruß
      Sylvi

  • Noch ein paar Tipps zum HTML/CSS:

    – Warum stehen die gemeinsamen Attribute (width, height, border, cursor) nicht in der gemeinsamen Definition? Das gleiche gilt für die hover-Transparenz.
    – Die cursor-Angabe ist für Links ziemlich unnötig.
    – Das alt-Attribut ist für Bilder, nicht für Links (http://www.w3.org/QA/Tips/altAttribute). Wenn ein alternativer Text angegeben werden soll, dann über „Twitter“ mit „text-indent:-9999px;“ verwendet werden.

    • @hcr

      Danke für Dein Feedback und die hilfreichen Tipps.
      Vielleicht noch einmal ein Zitat aus meinem Beitrag als Hinweis:

      Diese sollen natürlich nur als Anhaltspunkt dienen.

      Selbstverständlich liegt es letztendlich an jedem selbst, ob und wie er die CSS-Werte nachträglich ändert bzw. optimiert. Die im Beitrag dargestellten sind sicherlich nicht optimal, dienen aber erst einmal für einen besseren Überblick, wie sich die per Tool generierten und selbst angepassten Werte zusammensetzen.

      Die cursor-Angabe ist für Links ziemlich unnötig.

      Ist meiner Meinung nach Ansichtssache. Bei eindeutig sichtbaren Links stimme ich Dir zu, bei verlinkten Grafiken eher nicht.

      Das alt-Attribut ist für Bilder, nicht für Links

      Danke für den Hinweis. :-)

  • Hallo,
    zu deinem Tipp:

    Außerdem solltet ihr Sprites vermeiden, die Bilder in sehr unterschiedlichen Größen beinhalten. Legt lieber mehrere Sprites an.

    Jetzt ist „sehr unterschiedlich“ natürlich ein relativer Begriff. Ich würde aber generell versuchen, das maximal Mögliche zu kombinieren.
    Ein zus. Bild => das heißt ein zus. Request => das heißt Performanceeinbußen….

    • Hallo Harry,

      ich würde einem Sprite, das beispielsweise meine Socialmedia-Buttons oder kleinere Theme-Grafiken enthält, nicht zusätzlich ein großes Header- oder Hintergrundbild hinzugefügen.

      Ich hatte bei meinem ersten „Spriteversuch“ schon ein bisschen das Problem, die einzelnen Elemente per CSS einzubinden, ohne das ein anderes mir dabei in die Quere kam. Das ist mir insbesondere bei der Methode mit SpriteME passiert, da dort die Platzierung der Grafiken automatisch generiert wird.
      Mit der im obengenannten Beitrag beschriebenen Methode hatte ich wesentlich mehr Einfluss darauf, wo ich die einzelnen Bilder anordne.

      Die Gefahr besteht auch, dass das Sprite eine derartige Dimension annimmt, dass das Laden dieser Grafik enorm viel Traffic kostet.
      In einem anderen Blog habe ich sämtliche Grafiken wieder aus dem Sprite entfernt. Aber dessen Theme beinhaltet im Gegensatz zu diesem Theme hier wesentlich mehr Grafikelemente.
      Die Ladezeit ist bei dem anderen Blog trotzdem recht gut, da meines Erachtens das Optimieren von Grafiken bereits eine Menge ausmacht.
      TinyPNG ist neben Riot mein absoluter Favorit.

      Ein zus. Bild => das heißt ein zus. Request => das heißt Performanceeinbußen….

      Da stimme ich Dir natürlich grundsätzlich zu.

      Gruß Sylvi

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung

%d Bloggern gefällt das: