HTML/CSS

CSS-Sprites Quellensammlung

14. April 2009
von

Neu ist die Technik nicht, es braucht sie aber auch nicht jeder. Und wer bisher nie von “CSS-Sprites” gehört hat, könnte sich die Sache ja einmal näher anschauen. Worum geht’s? Sprites bedienen sich eines Tricks, um die Zahl der HTTP-Aufrufe beim Laden einer Webseite zu verringern. Mehrere Einzelgrafiken werden zu einer Tafel zusammengefasst. Via CSS wird dann nur der jeweils benötigte Teil des Bildes gezeigt, da wo er gebraucht wird.

Eingesetzt wird das vor allem auf abrufstarken Seiten. Der Surfer lädt statt vielleicht eines Dutzends kleiner Grafiken nur eine größere Datei. Diese Praxis entlastet den Server. Eingesetzt wird das zum Beispiel bei XING, Youtube, Amazon, Yahoo, AOL, Google oder auch bei der Deutsche Bahn – ein gutes Beispiel zum Studieren liefert diese kleine Website.

Screenshot

Sprite-Tafel bei XING (Ausschnitt)

CSS-Sprites werden dort benutzt, wo es um feste grafische Bestandteile geht. Also nicht im Content, das wäre zu viel Aufwand, sondern in der Navigation und bei sonstigen wiederkehrenden Seitenbestandteilen wie Logos, Linien, RSS-Icons und so weiter.

Einen weiteren Vorteil bieten CSS-Sprites, wenn Menüleisten mit dem so genannten Hover-Effekt ausgestattet wurden sollen. Damit der Effekt funktioniert, sind die Einzelbilder in zwei Zuständen vorhanden, je nachdem, ob die Maus das Bild berührt oder nicht. Das Problem dabei, die Zusatzbilder werden erst geladen, wenn sie gebraucht werden, sprich, die Maus auf dem Bild steht. Jeder hat solche Menüs schon gesehen, die erst verzögerungensfrei hovern, wenn die Dateien im Cache verfügbar sind. Abhelfen kann man mit Javascript. Sprites sind jedoch eleganter, da sowieso alle Bilder gleichzeitig mit einer Datei geladen werden, sind auch die Hover-Zustände sofort verfügbar.

Screenshot

Sprite-Tafel bei Youtube (Ausschnitt)

Und die Dateigrößen? Lädt die Tafel nicht viel länger als die Einzelbilder? Nicht unbedingt, die Tafel sollte nach allen Regeln der Kunst optimiert sein. Selbst, wenn die Datei größer wäre, spielte das kaum eine Rolle. Die oben abgebildete Tafel von XING, die im Original noch größer ist, “wiegt” lediglich 12 Kilobyte.

CSS-Sprites schränken den Bild-Klau etwas ein. Zum Einem muss man an die Tafeln erst einmal herankommen. Zum Anderen gibt es keine Einzelbilder mehr, die man mal eben speichern oder mit Drap&Drop entführen kann. Ein echter Schutz ist das selbstverständlich nicht, er macht es “Gelegenheitsdieben” aber nicht unbedingt einfach.

Vorteile:

  • HTTP Abrufe werden verringert, Ladezeiten verkürzt.
  • Schnellere Hover-Effekte in Menüleisten – und das ohne Javascript.
  • Änderungen müssen nur noch an einer Datei vorgenommen werden.

Nachteile:

  • Ältere Browser stellen ein Risiko dar. Sie zeigen unter Umständen nicht das, was gezeigt werden soll.

Artikel über CSS-Sprites (Auswahl)

CSS Sprites
Einsparung an HTTP-Requests durch Kombination von Hintergrund-Bildern (.de)

CSS Sprites: Image Slicing’s Kiss of Death
Ur-Artikel auf ALA (.en)

Screenshot

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Illustriert erklärt von Chris Coyier (.en)

Screenshot

CSS Sprites
How Yahoo.com and AOL.com Improve Web Performance (.en)

CSS-Sprites
Die Technik, einsteigergerecht erklärt (.de)

What Are CSS Sprites?
Einführung von Jason Cranford Teague (.en)

Screenshot

Sprite Optimization
“Lohnt es sich?”, fragt Dave Shea (.en)

Hovereffekte mit CSS-Sprites
Stefan David bei den Webkrauts (.de)

Creating easy and useful CSS Sprites
Einführung von Ignacio Ricci (.en)

Screenshot

Fast Rollovers Without Preload
Praxisbeispiel (.en)

Screenshot

CSS Sprites + Rounded corners
Ein weiteres Praxisbeispiel, hier geht es um abgerundete Ecken (.en)

Screenshot

CSS Image Sprites
How to Create CSS Sprites for Blog Icons, Web Site Icons (.en)

Optimize Your Web Site by Using CSS Image Sprites
Artikel in drei umfangreich bebilderten Teilen (.en)

Screenshot

Animated GIF For CSS Sprites
Auch animiert lassen sich die Sprites einsetzen (.en)

Screenshot

Image Sprite Navigation With CSS
Ein einfaches Menü mit Hover-Effekt wird erklärt (.en)

Screenshot

Advanced CSS Menu
Ein Tutorial der Webdesignerwall (.en)

Screenshot

How to use CSS Sprites (Screencast)
Wer 10 Minuten Zeit hat, kann sich dem Screencast mit Chris Spooner zuwenden (.en)

Exactly How to Use CSS Sprites (Screencast)
Noch ein Video, diesmal mit Andres Fernandez von NetTUTS (.en)

CSS-Sprites total (Podcast)
Sascha Postner und Daniel Jagszent erklären die Sache im Postcast bei Technikwürze. (.de)

CSS-Sprite Generatoren

Projekt Fondue CSS Sprite Generator
Arbeitet unter anderem auch in deutscher Sprache. Dieser Generator ist der bekannteste.

Screenshot

Chris Brainards Sprite Creator 1.0

SmartSprite 0.3.3
PHP-Version

CSS Sprite Generator
Drupal Modul

CSS Sprites Generator
Online-Version – alpha

SmartSprites
Java-Version ™

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber diverser Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Vorstand und Mitgründer der Smashing Media AG.

24 Kommentare zu „CSS-Sprites Quellensammlung
  1. deweso am 14. April 2009 um 10:25

    Ich dachte das dies Thema schon zu genüge behandelt worden sei, aber die Zusammenstellung der Links ist sehr gut, auch wenn für mich nichts neues dabei war.

  2. Rene Schmidt am 14. April 2009 um 10:31

    Nun ich denke, von dieser Technik profitieren große Websites am meisten, weil dort am meisten Requests und Datenvolumen eingespart werden kann. Für kleine Websites lohnt es sicht in der Regel nicht so sehr, die Technik einzusetzen, alleine schon weil es technisch recht umständlich ist wie ich finde.

    Für Menüs (Texte in der Navi meine ich) ist die Technik noch weniger geeignet, weil sich die Einträge auch mal ändern können und dann muss man gleich das ganze Sprite anfassen und genau aufpassen, dass man bei der Änderung nichts kaputt macht.

    Aber das soll natürlich keine Kritik sein. Sprites haben durchaus ihren Nutzen, insbesondere bei Grafiken, die sich im Laufe der Zeit wahrscheinlich nicht ändern. Smileys und Icon-Sammlungen zum Beispiel.

  3. » CSS Sprites 技巧 am 14. April 2009 um 13:44

    […] 一个德国佬的文章 CSS-Sprites Quellensammlung […]

  4. […] Dr. Web greift das Thema “CSS-Sprites” auf. Von dieser Technik profitieren große Websites am meisten, weil dort am meisten Requests und Datenvolumen eingespart werden kann. Für kleine Websites lohnt es sicht in der Regel nicht so sehr, die Technik einzusetzen, alleine schon weil es technisch recht umständlich ist wie ich finde. […]

  5. links for 2009-04-14 « /home/servrrockr am 15. April 2009 um 01:00

    […] CSS-Sprites Quellensammlung (tags: howto image css webdesign sprite) […]

  6. domingos am 15. April 2009 um 16:20

    Eine Alternative sich wiederholende Grafiken wäre auch die Umwandlung der Graphik in Base64. Das spart Traffic etwa bei Buttons oder Hover-Graphiken.

  7. Chukki am 15. April 2009 um 19:23

    @Rene: Warum müssen Menu Buttons denn direkt mit Text versehen werden? Auch wenn du einen Hover beim Hintergrund Bild machst und der Text einzeln daher kommt lohnt sich das ganze schon.

    Ich hab diese Technik nun zum ersten mal in einem Projekt genutzt und bin sehr begeistert. Vorher war es nicht wirklich nötig.

  8. Rene Schmidt am 15. April 2009 um 19:30

    @Chukki: Müssen sie nicht, hab ich auch nicht gesagt. :) Menütexte *sollte* man nicht als Grafik einbauen und wenn man doch es macht, sollte man sie nicht in einem Sprite unterbringen.

    Wenn man Hintergrundbilder für Menüeinträge in ein Sprite packt, ist das ein anderer Schnack. IMHO ist das OK und praktisch. Die ändern sich ja nicht, wenn man eine Seite oder einen Menüeintrag umbenennen will.

  9. CSS Sprites | MarkSimon.de am 16. April 2009 um 13:51

    […] cleaning up the CSS here at marksimon.de i sure would like to try out such refined techniques as CSS Sprites. Although there might be no actual purpose to it and, from an aesthetic point of view, i still […]

  10. Sprites mit CSS | Guru 2.0 am 19. April 2009 um 12:36

    […] Dr. Web: css-Sprites Quellensammlung […]

  11. CSS-Sprites « WebDevTeam’s Blog am 20. April 2009 um 10:55

    […] By chsch Ich bin bei Dr. Web auf einen interessanten und praxisorientierten Artikel zu CSS-Sprites gestoßen. Es wird dort auch ein Sprite-Generator vorgestellt den ich aber noch nicht getestet […]

  12. FAMI-Blog » CSS Sprites am 21. April 2009 um 09:41

    […] wie “hover” schneller geladen werden und HTTP-Aufrufe reduziert werden können. In dem Artikel finden sich zahlreiche nützliche Links um diese Technik […]

  13. tanila am 23. April 2009 um 22:24

    erstmal Vielen Dank fürs verlinken.

    @domingos:
    Die Idee hatte ich auch. Es gibt aber auch Nachteile mit base64 encoding:
    – IE(6) kann das nicht.
    – Die base64 Daten sind etwa 1/3 größer als die entsprechende Bilddatei.

    Vorteil natürlich kein Request mehr. Ein Kompromiss wäre mit star hack IE user zusätzlich das Bild laden zu lassen.

    Ist halt Geschmackssache. Nächste Version von smartsprite_php wird das wohl unterstützen :)

  14. Albi am 15. Mai 2009 um 15:56

    Interessante Artikel, ich kannte die Technick, aber der Beispiel von XING hat mir überzeugt.
    Gruß

  15. Tom am 19. Mai 2009 um 20:04

    Hallo, schöner Artikel :)

    Ich denke, CSS Sprites machen es leichter, Grafiken zu klauen, da man gleich einen ganzen Schwung abgreifen kann. Mal eben das Hintergrundbild aus dem Firebug fischen und schon hat man alles auf einen Blick.

    Das Argument, dass CSS Sprites das Bilderklauen schwerer machen, finde ich daher an den Haaren herbeigezogen.
    Der Rest bietet aber eine nette Übersicht, danke.

    Tom

  16. tanila am 25. Mai 2009 um 10:58

    Hi,

    @Tom:
    ich finde das stressiger, wenn man die Bilder aus dem css-sprite-image noch ausschneiden muss. Mit Tools wie Firebug kannst du ja so oder so die einzelnen Bilder direkt klauen. Und musst sie nicht noch mit einem Grafik-Tool ausschneiden. Somit wird einem die Sache schon etwas erschwert imo.

  17. CSS Sprites : CSSGURU.DE am 8. Juni 2009 um 20:06

    […] Links zum Thema Sprites: CSS Sprites Quellensammlung (Dr.Web) addthis_url = ‘http%3A%2F%2Fwww.cssguru.de%2Fcss-sprites%2F'; addthis_title = ‘CSS+Sprites'; […]

  18. […] In den letzten Monaten ist die Frontend-Optimierung von Webseiten in Mode geraten. Der Hintergrund ist ganz einfach: im Regelfall entstehen 2/3 der Ladezeit einer Seite nicht bei der Generierung auf dem Server, sondern während der Browser die Daten lädt und rendert. Und da schnellere Seiten = zufriedenere Kunden, lohnt es sich hier auch hier mal zu graben und nicht in den Untiefen der Serverkonfiguration. Zum Thema Frontend-Optimierung gibt es Bücher, hilfreiche Software von Yahoo! und Google oder auch die Dr. Web Quellensammlung. […]

  19. […] CSS-Sprites sind eine beliebte Möglichkeit die Zahl der Grafik-Requests zu reduzieren. Diese Technik kombiniert Hintergrundbilder zu einer Grafik die per background-position entsprechend angezeigt werden. Den entsprechenden Artikel zu diesem Thema findet man unter Dr. Web – CSS-Sprites Quellensammlung. […]

  20. Webtwist am 20. März 2010 um 09:51

    Sehr gelungener Artikel wie ich finde. Die Sache mit dem Bilderklau finde ich persönlich etwa überspitzt. Derjenige, der is drauf anlegt fremdes Eigentum in seinen Werken zu verwenden, der wird sich das Material beschaffen und sind wir ehrlich, er wird sie auch bekommen: Ob mit oder ohne Firebug/ PS geschnippsel.

  21. […] hast helfen sprites die anzahl der http zugriffe zu verringern und beschleunigen so deine Website. hier gibts dazu ein schönes tutorial und einen link zu einem sprite […]

  22. […] hochperformanten Internetauftritten, darunter Google und Amazon, implementiert. Es gibt zahlreiche Tutorials, die Ihnen helfen, diese Technik zu meistern. Die Grafiken können Sie anschließend per Sprite […]

  23. CSS-Design-Blog am 4. Mai 2010 um 15:32

    CSS-Sprites machen wirklich einiges einfacher und das Gute daran ist, selbst die älteren IE’s haben damit keine Schwierigkeiten ;o)

  24. […] der HTTP-Requests durch den Ein­satz von CSS-Sprites gedrückt. Bei Dr. Web gibt es dazu eine umfang­rei­che Quell­samm­lung, die aller­dings nur für Enthu­si­as­ten […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!