CSS-Sprites total Technikwürze 130

Herzlich willkommen zu Technikwürze. Heute die Folge hundertdreißig CSS Sprites total. Und nachdem der Daniel seinen Safari-Prozess beendet hat und neu gestartet hat und jetzt auch wieder die ganzen Dokumente zur Verfügung hat, ist auch er heute mit dabei.

Richtig, ja hallo.

Herzlich willkommen zu Technikwürze, eurem Design und Webstandard-Podcast. Von und mit David Maciejewski, Nadja Müller, Sascha Postner und Daniel Jagdzent.

Ja, herzlich willkommen zu unserer heutigen, kleinen Ausgabe zum Thema CSS Sprites. Mit einer Premiere gestartet, grade schon erwähnt, dein Safari ist abgeraucht.

Ja, das, ist, in letzter Zeit gar nicht mal so eine Premiere. Ich hab den auch allerdings, muss ich dazu geben, etwas länger auf und mit etwas mehr an Fenstern. Und irgendeines von diesen Fenstern hat wohl irgendwo ein Speicherleck und na ja.

Kommt schon mal vor.

Dann passiert das halt.

Wenn's dich beruhigt, ich bin das gewöhnt, aber, mir als, Windows-User, schreibt das ein kleines Lächeln aufs Gesicht, dass euch das auch mal passiert, ihr Macianer. Whatever. Das soll heute nicht unser Thema sein. Unser Thema ist, sind CSS Sprites. Der eine oder andere wird es schon gehört haben. Vielleicht, ist es vor allen Dingen ein Thema oder ein, eine Sendung eben für Leute, die noch nicht so genau was damit anfangen können.

Aber wir werden versuchen, natürlich auch noch ein paar Argumente für die Leute mit, einzubauen, die sich schon mit dem Thema auskennen. Was genau sind eigentlich CSS Sprites? Ja. Ein CSS Sprite, wie wir das definieren, ist letztendlich ein Bild, in dem sich viele kleine Bildelemente wiederfinden, die, auf einer Seite Verwendung finden.

Heißt letztendlich, wenn man zum Beispiel ein, grafisches Interface hat auf einer Webseite mit vielen Icons, dann hat man nicht für jedes Icon ein eigenes Bild, eine eigene Datei, sondern man hat eine große Bilddatei, in der sich, ich sag jetzt mal gekachelt, alle diese kleinen Icons wiederfinden. Sprites, sind schon bisschen länger bekannt aus dem Bereich der Computergrafik, auch aus dem Bereich von Computerspielen.

Wir haben uns da noch mal ein bisschen versucht einzulesen und haben festgestellt, dass unter anderem der Wikipedia-Artikel nicht so gut aufbereitet ist.

Ja, und das ist ein, die Sprites, also das ist ein bisschen auch vor unserer Zeit gewesen, oder? Also die, die, die Benutzung oder die Verwendung von Sprites, auf C64. Also der, da haben wir sie dann bestaunen können, aber

Ja, das stimmt. Ich wollte grade sagen, weil ich hab noch mit Datasette gearbeitet. Ja, also das,, war schon noch meine Zeit. Aber ich hab tatsächlich, die, ich bin mit Sprites konfrontiert worden, als ich für Duke Nukem 3D, Level gebaut habe.

Was für Level denn eigentlich? Jetzt mal so ein kleiner Exkurs, aber hattest du wie,, in meiner Uni mal, üblich oder mal, mal geschehen, das, die Mensa nachgebaut oder was

Also damals war ich noch nicht in der, also war ich noch nicht in der Uni. Das war, aber ich hab tatsächlich und keine Sorge, bevor jetzt irgendjemand irgendwen anruft, ja. Also ich hab tatsächlich mal uns, die Turnhalle unserer Schule nachgebaut, weil die so schön einfach war. Ja, ja, keine Amoklaufgefahr. Keine Sorge. Nee, aber, wir haben auch alles Mögliche gebaut, so Weltraumstationen und so. Und da gab's halt auch CSS Sprites.

Nicht CSS Sprites, Entschuldigung, sondern überhaupt generell Sprites. Das Ganze hat aber nichts, also es hat in, es hat nichts mit dem Getränk Sprite zu tun. Sprite scheint der englische Ausdruck für, Kobold, zu sein. Das hatte damals wohl in den Grafik, in den, in den Spielen oder in Grafikanwendungen, den Grund, dass es so benannt wurde, weil die quasi auf dem Bildschirm rumgespukt haben, ohne, wirklich in der – jetzt muss ich ganz kurz nachlesen –, ohne im Grafikspeicher zu finden zu sein.

Weil sie nämlich, quasi komplett von der Hard, von der Grafikhardware positioniert wurden. Kleine, kleiner Hinweis: Die Sprite, von, Coca-Cola, die man so schön trinken kann, kommt wohl aus dem zusammengesetzten Wort aus Sprinkle und, Light, also spritzig, spritzig und leicht. Ne, das ist dann Sprite.

Okay, heißt nicht Kobold.

Okay, genau. Aber, so viel zu den Exkursen. Zurück zum Thema CSS Sprites. Die Frage ist, warum sollte man das, oder warum benutzt man es? Warum sollte man es, ist, auch noch zu diskutieren, aber, w-wo ist der sittliche Nährwert?

Ja genau. Also w-wann die Technik eigentlich meines, meiner, meines Wissens eingeführt wurde, ist, mal wieder ein Problem des Internet Ex-Ex-Explorers gewesen, dass, man kennt ja diese hübschen On-Mouse-Over-Effekte Oder wenn man mit der Maus über, über 'n Bild drübergeht, dass, das Bild ausgetauscht wird und, man sieht dann halt dann den, den, den Over-Effekt, also das, das Over-Effekt ist ein, ein anderes Bild.

Und, das hat halt, wenn man, wenn man das in den Dreamweaver-Manier macht, einfach das Source-Element neu zu, neu zu setzen, dann flackert das halt, weil, in, der, der, das Bild ja erst geladen wird, wenn es auch schon angezeigt werden soll. Genau und dann da, da wurden dann halt, CSS Sprites für benutzt, um, um halt dieses, Bild schon vo-vorher geladen zu haben und dann einfach nur de, dieses Hintergrundbild, zu verschieben beim Und was so war.

Also, man muss sich das so vorstellen: Nehmen wir mal das Standardbeispiel, man hat ein, eine Navigation, mit Buttons, mit, die als Hintergrund dienen. Ich hab zum Beispiel einen, blauen Button, der den, Status des Buttons anzeigt, wenn grade nichts passiert. Wenn ich mit der Maus drübergehe, soll der Button rot werden.

Geht man halt hin, und arbeitet entweder ganz furchtbar mit JavaScript zum Beispiel und sagt: "Hier tausch bitte das Bild aus oder den Hintergrund aus", dann wird quasi ja das neue Bild geladen und das Gleiche passiert, wenn ich jetzt 'n mit 'nem, mit einer Pseudo, Pseudoklasse? Uh, wie peinlich.

Ja, Pseudoklasse.

Pseudoklasse, ja Pseudoklasse, ja. Mit einer Pseudoklasse arbeite mit Hoover in, in CSS-Manier und sage: "Okay, dann bitte ein anderes Hintergrundbild anzeigen.", das führt in jedem Fall im Internet Explorer, zum, großen Flackern, kann aber auch in einigen anderen Browsern, für einen solchen Effekt sorgen, weil eben das Bild nachgeladen werden muss. Und selbst wenn man eine super mega schnelle Internetleitung hat, also winzige Millisekunden vergehen halt, ja.

Zu diesem Zweck geht man dann halt hin, nimmt, eben ein Bild, in das man beide Stati des, Buttons reinmacht, nämlich den roten und den blauen, und, positioniert das Hintergrundbild quasi. Und in dem Moment gibt man dann, wenn man mit der Maus drübergeht, gibt man dem Hoover-Status, einfach eine andere Position des Bildes, sodass also quasi sich im Hintergrund das Bild, sprungartig verschiebt.

Hat eben den Vorteil, dass das Bild schon komplett geladen worden ist und im Cache des Browsers zu finden und es sich also durch das Verschieben, nicht neu geladen werden muss und auch nicht flackert.

Ja, es wird ja auch gar nicht, gar nicht mal die kom, der, der, die URL von dem Bild verändert, sondern einfach nur die, die Position des Hintergrundes. Deswegen kann es auch gar nicht flackern, sozusagen.

Ganz richtig.

Ja, das ist, das initiale Problem gewesen, wof-wofür dann CSS Sprite verwendet wurden. Aber, mittlerweile werden sie ja auch etwas, weiterverwendet, oder?

Ganz genau. Also, damals, scheint es so gewesen zu sein, dass die ersten Leute, die das verwendet haben, halt tatsächlich, wenn sie damit gearbeitet haben, viele, solcher Sprites gemacht haben. Also zum Beispiel ein Sprite für, das Menü, ein Sprite für das Submenü, ein Sprite für, Kontakt-Icons oder solche Dinge.

Mittlerweile ge-gehen viele hin und, kombinieren noch vie, also kombinieren all diese Sprites zusammen in einem Monster Sprite und, gehen, haben halt eine rie, ein, eine Riesenbilddatei, in der sehr, sehr, sehr viele, Icons oder Hintergrundgrafiken oder auch generell Grafiken zu finden sind, die auf der Seite Verwendung finden. Jetzt könnte man sich fragen: Macht das überhaupt Sinn?

Denn wenn man drüber nachdenkt, ist ja klar, dass wenn ich ganz viele Bilder in einem großen, in einer großen Bilddatei kombiniere, diese relativ groß wird. Und man stellt sich die Frage: Wäre es nicht schneller, mit vielen kleinen Dateien zu arbeiten?

Richtig, ja. Das, ja könnte man sich fragen. Allerdings, ist es, ist es meistens so oder im Regelfall so, dass, dass, diese große Bilddatei, in, in der Summe kleiner ist als, als, als all die, all diese kleinen Bilddateien in der Summe.

Das ist,, tatsächlich mir auch so aufgefallen, auch wenn man sich die ganzen, Artikel, die zu diesem Thema CSS Sprite so existieren im Netz anguckt, wird das quasi immer wieder deutlich. Ich find das ganz spannend. Hat das damit zu tun, dass, quasi jedes Bild einen gewissen, ich sa, ich sag's jetzt mal laienhaft, Header und Footer hat, der immer dabei sein muss.

Und das heißt, wenn ich dann aus zum Beispiel 30 kleinen Bildern ein großes mach, spare ich da auch solche Metadateien oder solche, so 'n Overhead oder so was?

Genau, ja genau, das ist es. Also da wenn eigentlich nur 'n Header ist da, es gibt kein Footer, aber Es ist sozusagen nur 'n Header, aber in, in dem steht da, stehen halt so Codierungsanweisungen drin. Also je, je nach, je nach Art, des, der, des Grafikformats, ist, ist es ja an, ist es ja anders codiert, die, die Bilddaten, also irgendwie komprimiert.

Und, es, bei den meisten dieser Komprimierungsmethoden ist es halt von Vorteil, wenn, wenn Das Bild größer ist, dann gibt's, dann hat, dann hat der Algorithmus ja mehr Daten zur Verfügung, die er, die er halt, mit denen er arbeiten kann, mit denen er und dann kann er besser komprimieren.

Das heißt, im Regelfall gilt für diese Technik der CSS Sprites, nicht das, was Aristoteles mal gesagt hat. Ich möchte kurz mein geisteswissenschaftliches Studium einbringen. Er hat nämlich gesagt, quasi, das Ganze ist mehr als die Summe seiner Teile. In diesem Fall ist es, genau umgekehrt. Da ist das Ganze nämlich kleiner als, die Summe seiner Teile. So viel zum Klugscheißer-Exkurs.

Ich glaub, ja, das war anders gemeint, aber ist egal.

Ja, das ist sehr anders gemeint. Nein, trotzdem könnte man ja denken, nun, ich hab halt diese, diese, Datei und, die ist relativ groß, auch wenn sie vielleicht von der Gesamtspeichergröße kleiner ist als die Summe der einzelnen Dateien. Aber, bringt das, also dauert es nicht trotzdem länger? Ein weiterer Vorteil dieser Technik, also des Zusammenfassens der Bilder, ist, dass man sich, HTTP-Anfragen, also HTTP-Requests sparen kann. Kannst du dazu was sagen, warum das, wichtig ist?

Genau, das,, es gibt im, in der HTTP-, Spezifikation, die ja schon einige Jährchen her ist, gibt, gibt es da einen Abschnitt, in, in dem, bestimmt wird, dass ein Browser nur maximal zwei oder vier, ich weiß die ganz genaue Zahl nicht, Verbindung zu einer Domain aufmachen darf parallel. Das kann man auch gut in Firebug, halt in dem Netzwerkmonitor oder in Safari in dem, in dem Netzwerkmonitor beobachten, dass, Bilddateien nicht alle parallel geladen werden, sondern, nur teilweise parallel.

Und, standardmäßig halt nur zwei parallel. Also nicht nur so Bilddateien, sondern halt Skripte, Bilddateien, CSS-Dateien, alles.

Ja, Flash und so weiter, ja.

Genau, ja. Und da ist es natürlich von großem Vorteil, wenn, wenn, wenn alle Bilder in einem einzigen Request, dann halt abgehandelt wurden. Nicht alle Bilder, aber halt die meisten Bilder-... mit dieser großen Sprite-Datei in einem Test abgearbeitet wurden. Und vielleicht ist nicht so das, gravierendste Element, aber so ein, so ein HTTP-Request hat ja nur noch einen Header. Der wird natürlich, natürlich auch gespart.

Also da wird halt nur ein einziger Header mit übertragen anstatt zwanzig, dreißig. Sind jetzt nicht so riesig, die Header, aber...

Ja, aber Kleinvieh macht ja bekanntlich-

Jedes Bei zählt.

Ganz genau. Zumal, also wenn man den Traffic, vor allen Dingen, wenn man den Traffic bezahlen muss.

Ja, das stimmt.

Was jetzt auch immer weniger wird. Also wir haben unter anderem einen Artikel, den-- wir werden ein paar Artikel, in den Show Notes, verlinken, unter anderem auch den Artikel von David Shear. Ich hoffe, den guten, wie heißt der? Den Dave, Dave Shear, ja..

Wie auch immer der ausgesprochen wird, ne.

Ja, ich, ich sag jetzt einfach mal Dave Shear. Der damals auf A List Apart, quasi so den ersten Artikel dazu, veröffentlicht hat, aber auch einen Artikel, vom, von, von einem Yahoo! Wie hießen die Jungs noch mal?

Exceptional Performance Team.

Ja, vom Exceptional Performance Team. Super Marketing Buzz Name. Die unter anderem, halt auch noch mal so ein bisschen aufzeigen, wie viel man ersparen kann, festgestellt haben, dass man quasi, dass achtzig Prozent der, der, Anfrage, also überhaupt der Ladezeit von Webseiten über die HTTP Requests und die, das Laden von eben solchen Sachen wie Stylesheets, Images, Skripten und so weiter generiert wird.

Und man kann signifikant die Ladezeit von Webseiten, steigern, wenn man halt, CSS Sprites für solche Fälle einsetzt. Mhm. Beispiele dafür, sind, also die vor allen Dingen wirklich große CSS Sprites einsetzen, sind sehr berühmte. Also, fängt zum Beispiel an bei Google. Man kann, wenn man da sich das Ganze mal näher angucken möchte, einfach mal, eben wenn man auf so einer Webseite drauf ist, sich mal die, Stylesheets angucken.

Oder super Tipp oder ganz einfach gemacht, wenn man die Web Developer Toolbar hat, zum Beispiel für den Firefox, dann einfach mal in dem Image, in dem Images, Menü auf View Image Information, gehen und dann werden einem ja alle Bilder angezeigt, die auf der Webseite verwendet werden und man ist dann teilweise irritiert wie bei Google, Yahoo sowieso. Sie haben sich da sehr intensiv mit auseinandergesetzt.

Schönes Beispiel auch Mobile Me, auf das, der-- Jetzt muss ich mal kurz überlegen, mal nachgucken. So viele Links, dann kann man sich das nicht alles merken. Ich glaub, es war Gerrit von-

Gerrit von Aken, ja.

Gerrit von Aken hatte darauf hingewiesen, die haben quasi eigentlich alles. Das ist im Moment nicht mehr so, aber als er seinen Artikel geschrieben hat, war es so. Die haben quasi wirklich alle Grafiken, die sie auf der Webseite verwenden, in einer Datei. Die ist gigantisch groß, also ich glaub über dreitausend Pixel, und lädt trotzdem ultraschnell dann deutsche Beispiele, Xing zum Beispiel, die Bahn und, was es nicht noch alles gibt.

Also es gibt halt, sehr viele bekannte Webseiten, die damit arbeiten und, wo man tatsächlich mal nachverfolgen kann, wie da, wie schnell die ganzen, CSS Sprites laden.

Ja, das, zeigt ja, dass, da muss ja was dran sein, ne. Das muss ja gut sein.

Na ja, also, ob jetzt zum Beispiel jetzt unbedingt ein Signal ist, wenn die Bahn das benutzt, lassen wir mal dahingestellt. Aber, es ist tatsächlich einfach mittlerweile, 'n sehr, 'ne sehr bekannte Technik und auch eine sehr akzeptierte Technik.

Ich hab noch letzte Woche ganz die Hände überm Kopf zuschlagen, weil ich einer Agentur, die tatsächlich im Quelltext weder unobtrusive noch sonst irgendwie, mit JavaScript quasi on mouse over Effekte, gemacht hat und noch nicht mal ein Hintergrundbild ausgetauscht hat, sondern wirklich 'n, 'n Image Tag im Quelltext ausgetauscht hat. Und es hat unfassbar ge-geflackert quasi, weil dann auch noch der Server super langsam war und, die tatsächlich von CSS Sprites noch nichts gehört haben, hatten.

Deshalb war es mir auch noch mal ein Anliegen, diese Sendung jetzt hier zu machen. Ja, kommen wir mal ein bisschen zu den, trotzdem vorhandenen Nachteilen, wenn man die so nennen möchte. Nachteilen. Also sagen wir mal so, ich glaub vielen, die das jetzt noch nicht kennen, die sich jetzt zum erst, die zum ersten Mal sich jetzt, gedanklich mit CSS Sprites auseinandersetzen.

Wir entschuldigen uns dafür, dass, es immer ein bisschen schwierig ist, so was zu visualisieren, wenn wir jetzt sagen, ihr verschiebt das Hintergrundbild. Ich hoffe, ihr könnt euch das so ein bisschen vorstellen. Die meisten Leute haben noch ein bisschen im Kopf: Na ja, aber früher hab ich doch immer alle Bilder klein gestückelt. Das war erstens 'ne Zeit, wo wir noch alle mit Layouttabellen gearbeitet haben. Wer sich mit Layouttabellen auseinandersetzen will, geht jetzt eine Sendung zurück.

Da war letzte Woche Layouttabellen total. Und ich weiß noch, ich hab zum Beispiel mit Fireworks seinerzeit gearbeitet und Webseiten damit gemacht und, da war eigentlich alles Bild. Man konnte froh sein, wenn Text mal nicht Bild war, weil alles in kleine Kacheln geschachtelt wurde. Das war damals auch State of the Art, unter anderem deswegen nicht nur wegen der Layouttabellen, sondern weil man ja auch langsame Internetverbindungen hatte und die Illusion geschaffen hat, dass dann schneller lädt.

Im Endeffekt von der Summe her-

Ein Vorteil war ja auch, dass, dass man dann einzelne Bilder dann als JPEG oder als GIF oder als animated GIF oder so machen konnte.

Ja, ja, genau, das stimmt. Also in dem Fall ist es schwierig, es sei denn, man macht ein großes animated CSS Sprite draus. Aber, das ist vielleicht nicht so schön. Aber damals war's halt, da ging's dann darum, dass man eben schon Teile des, der, der Webseite gesehen hat. In der Summe war hinterher der Lade, war die Ladezeit natürlich trotzdem höher, als wenn's jetzt ein großes Bild gewesen wäre.

Jetzt ist natürlich das Problem, wenn man das jetzt, so ein CSS Sprite hat und sagen wir mal, es ist wirklich richtig groß, paar viele Kilobytes, also vielleicht auch mal fünfzig Kilobyte oder so, was ich schon für groß halte, dann ist klar, dass das trotzdem natürlich seine Zeit zu laden braucht. Und in der Zeit sind diese, die, die Elemente dieses Bildes dann eben nicht vorhanden und auf der Webseite auch nicht zu sehen. Das sollte man nicht vernachlässigen.

Man hat immer so im Kopf: Ja, ja, aber DSL hat ja nun wirklich mittlerweile jeder. Erstens hat das nicht jeder, kommt ja dann demnächst hoffentlich mit der, mit dem, mit den, wie heißen die? Förderungspakete noch mal, die-

Weiß ich auch nicht

Infrastrukturförderungspakete, damit es der Wirtschaft wieder besser geht. Aber nicht nur die. Ich hab letztens auch mit meinem Rechner so langsame Internetverbindung gehabt, da merkt man mal wieder, ja, okay, da geht was. Trotzdem, kann man diesen Aspekt, denk ich, eher zurückstellen, denn, dann braucht's vielleicht 'ne Sekunde, bis dann diese Datei geladen ist. Im Gesamteffekt ist es immer noch besser.

Ja, und das ist ja eigentlich nur dann beim ersten Mal, dann ist das, Hintergrundbild im, im Cache und, und dann ist gut. Dann ist ja wieder-

Für die Gesamt, für die, für die-

Für die komplette Seite dann

Genau fürs Gesamterlebnis ist es natürlich, nett. Ich hör jetzt schon wieder Leute schreien, die sagen: „Ja, ja, aber wenn das dann nicht lädt, dann sind die Leute auch schon wieder von meiner Seite runter", oder so.

Aber das ist eigentlich bei der, bei den CSS Sprites, über die wir hier reden, eigentlich nicht der Fall, denn es wird ja hinterher kein Bild sein, das 1,2 Megabyte groß ist oder so, sondern wie gesagt, ich denke, wir reden über etwas, das bis maximal 100 Kilobyte geht und das find ich schon exorbitant groß. Also das ist nicht nötig. Wenn man PNGs benutzt, was gern genommen ist, dann unbedingt noch mal optimieren.

Und zwar nicht unbedingt mit, 'nem Adobe Tool, sondern möglicherweise mit was, anderem, dass das Ganze dann noch mal ein bisschen wirklich, runterdrückt. Da kann man sich teilweise noch mal vierzig Prozent Speicherkapazität sparen. Du hattest hier einen, einen Online-Dienst vorgeschlagen, den ich jetzt ehrlich gesagt nicht kenne.

Ja genau, das ist, Smush Punkt it, das ist Smush it. Das ist auch von den, Yahoo Exceptional Performance, Menschen und die benutzen einige Open Source Tools, um, um halt, diese PNG, um zum Beispiel PNG-Dateien, aber auch JPEG- oder GIF-Dateien zu optimieren. Alles halt lossless.

Und das kann was. Also das hat richtig, Einsparungspotenzial.

Ja, ja, ich hab da ein paar Testbilder durchgeschickt. Wir haben dann da fünfundzwanzig Prozent Einsparung.

Nettt. Also, vielleicht der richtige Zeitpunkt, wenn man sich überlegt, beim nächsten Webprojekt auch, die Icons oder die, Grafikinterface-, Objekte dann halt in den CSS Sprite zu packen, auch noch mal über eine bessere Bildoptimierung nachzudenken. Dann haben wir einen, na einen Vorteil gefunden, den wir aber gleichzeitig auch für einen Nachteil halten.

Ein paar Artikeln habe ich gelesen, dass es ja so unheimlich nett ist, dass man jetzt demnächst dann alle Grafikinterface-Elemente in einer Datei, hat und die dann schnell ändern und finden kann.

Das kam mir so ein bisschen vor wie das Argument, damals, als wir für CSS gekämpft haben und gesagt haben: „Leute, ist doch so super, wenn ihr irgendwie an, den Text jetzt von der gesamten Seite immer in Rot haben wollt, dann geht ihr in eine Datei, ändert dort den Hex-Code und zack, ist die ganze Seite rot. Ich find, das ist in dem Moment nicht ganz so schlüssig. Also, klar, man kann mal eben hinten ein neues, Element, also man kann ein neues Element integrieren.

Das kostet aber schon auch ein bisschen Arbeit. Und wenn ich jetzt mittendrin, also wenn ich wirklich großes CSS Sprite habe und mittendrin irgendwo das Icon ändern muss, finde ich das jetzt nicht wesentlich einfacher, als quasi das Icon in der Einzeldatei zu ändern.

Ja, und dann, machen wir so was, wo dann einfach das Bild ein bisschen größer wird. Also das rein einziges Icon ist dann der Slider ein bisschen größer und, jetzt musst du alle verschieben. Das ist dann nicht mehr Spaß.

Das ist richtig. Wobei, da sollte man dann halt tendenziell aufpassen, dass man, wenn man so einen CSS Sprite erstellt, genug Abstand da zwischen den, einzelnen Elementen lässt, dass so mal ein paar Pixel größer oder kleiner jetzt nicht, na, kleiner ist sowieso kein Problem, aber dass das halt nicht zu einem großen Problem führt.

Dann einfach weißen Zwischenraum lassen, der, oder in welcher Hintergrundfarbe man das auch immer gerade benötigt, und das dann, also da quasi schon mal ein bisschen vordenken so. Aber da haben wir auch gleich, kommen wir gleich noch zu ein paar Tools, die euch dabei helfen können, so einen CSS Sprite, zu generieren. Das, die denken da eigentlich schon im Prinzip dran. Ja, keine großartige Technik ohne Bugs.

Da haben wir so ein paar zusammengetragen, die allerdings größtenteils einigermaßen vernachlässigbar sind, weil sie, mittlerweile in den Browsern gelöst sind. Mmm, fangen wir mal mit unserem Liebling an, dem Internet Explorer 5.6, also vor allen Dingen 6, den wir, für den wir größtenteils diese Technik auch nutzen, nämlich um dieses Flackern bei den, On-Mouse-Over-Effekten zu, unterbinden.

Ich habe gelesen, ich hab, kann, hab das nicht nachvollziehen können und ich konnte auch diese, also ich konnte leider keinen, ich konnte das nicht replizier-- nee, ich hab heute echt Wortfindungsstörungen. Wie heißt das? Reproduzieren, so. Ich konnte das nicht reproduzieren, aber es stand in zwei Artikeln, dass es bei bestimmten Cache-Einstellungen trotzdem dazu kommt, dass der Internet Explorer die, Bilder für den On-Mouse-Over-Effekt oder für den Hover-Effekt nachlädt.

Unter anderem stand das auch in einem Webkraut-Artikel, den ich auch gerne verlinken möchte und wir wissen ja, dass die Webkrauts richtig viel Ahnung haben. Der ist von 2007 von, Stefan David. Und, ja, also vermutlich hängt es dann auch mit den Server-Cache-Einstellungen zusammen.

Ja, wahrscheinlich. Und wahrscheinlich ist das standardmäßig in der Patch so eingestellt, dass du da noch nie drüber gestolpert bist.

Ja, also mir ist es noch nicht passiert.

Mir auch noch nicht.

Ja. Gut, der nächste Kandidat ist überraschenderweise für mich, Safari, aber wir müssen es gleich wieder einschränken. Safari nämlich, nur bis zur Version 3. Also in der Version 3 aufwärts, gibt's das Problem nicht mehr. Da hat es scheinbar das Problem gegeben, dass Hintergrundbilder gekachelt werden oder wiederholt werden, auch wenn man quasi sagt, no repeat. Problem ist dann natürlich erst entstanden, wenn man jetzt tatsächlich Bilder ausgetauscht hat.

Also wenn man ein Bild, das man normalerweise im Quelltext eingebettet hat, durch ein CSS-Hintergrundbild ersetzt. Ja, ist wie gesagt, einfach zu lösen, indem man rund um das Bild einfach genügend Freiraum bei, beibehält, dann stört es nicht. Und wie gesagt, im Safari 3 aufwärts ist es eh nicht mehr.

Ja, wer benutzt denn schon noch Safari 2? Also.

Ja, okay. Ich kenne jetzt nicht die Austauschverhalten, oder das, das Austauschverhalten von Mac-Usern. Ich hab grade meinen alten G3 verkauft. Da ist noch Internet Explorer 5.1 ist das, glaube ich, ne, gewesen.

Und was für ein Safari hattest du da drauf?

Gar keinen.

Gar keinen?

Gab's da überhaupt schon Safari 5? Ich weiß nicht. Ich hab das Ding auch nur gehabt, um auf diesem unsäglichen Internet Explorer-- nee, 5.5 war das, glaube ich, oder? Internet Explorer.

Ja, ja.

Ich hab den nur gehabt, um damit zu testen, weil ich einen Kunden hatte, der darauf Wert gelegt hat. Und zwar immer noch bis vor Kurzem, jetzt ist er weg. Aber egal. Ja und dann Opera. Opera, hat bis zur Version neun, wohl Probleme gehabt, damit Hintergrundpositionen, also Hintergrundpositionen von über zweitausendvierundzwanzig Pixel oder weniger als, also minus zweitausendvierundzwanzig Pixel zu verarbeiten und rundet das dann irgendwie auf und ab.

Und, man musste dann quasi, oder man sollte, wenn man die Opera-Version vorher berücksichtigen möchte, was vielleicht keine schlechte Idee ist, kein, kein CSS Sprite machen, das größer als zweitausendvierundzwanzig mal zweitausendvierundzwanzig Pixel groß ist. Zusätzlich gibt's noch einen Bug im Opera sechs, der wohl keine Background Images on, aufm, auf Hoover anzeigt. Wir haben aber mal kurz nachgeguckt, also Opera sechs war aktuell, zwischen 2002 und bis Ende 2002 quasi.

Davor gab's dann die anderen Versionen. Sollte eigentlich keiner mehr benutzen. Ich weiß, dass das ein hehrer Wunsch ist, denn beim Internet Explorer sechs, ich weiß nicht, wann der auf den Markt gekommen ist, aber der wird wahrscheinlich auch schon älter als sechs Jahre alt sein, oder?

Ja, ich weiß leider nicht. Hätten wir ja auch mal nachgucken können, aber der ist älter als sechs Jahre, ja.

Ja, das, ist also dementsprechend zeigt sich, dass vielleicht nicht unbedingt alle, Browser immer sofort ausgetauscht werden müssen. Ich hab das jetzt mal nebenbei ganz schnell gegoogelt und hier steht, die Version sechs erschien am 27. August 2001. Und verbesserte die Unterstützung von CSS eins, DOM eins und SMIL 2.0. Whatever, SMIL, Synchronized Multimedia Integration Language.

Genau das.

Okay, whatever. Auf jeden Fall haben wir mit dem leider auch noch intensiv zu kämpfen. Letzter, ich will das nicht unbedingt Bug nennen, aber, das iPhone, verballert unglaublich viel Speicher bei großen Sprites. Das Ding, so geil es ist, ich bin ja kein großer Freund, obwohl ich eins habe, hat da ein echtes Speicher, Managementproblem, wenn man da mit riesen zweitausend Pixel mal tausend Pixel CSS Sprites um die Ecke kommt.

Das sollte man aufm Schirm haben, aber ich denke, vielleicht wird sich auch das ja irgendwann mal ändern und vielleicht dann mit der Version, der Firmware-Version 3.0, wo man dann ja auch endlich Copy und Paste bekommt. Ja, das sind so die, Negativpunkte. Solltet ihr da noch irgendwas kennen, postet es gerne in die Comments. Ja, kommen wir mal zu Tools.

Richtig, ja. Da gibt, haben wir zwei Kategorien und zu jedem jetzt wieder mal so zwei Tools. Einmal die Online-Tools. Da gibt es, zum Beispiel den Sprite-Generator, Website Minus Performance Punkt org.

Ja, eh eine sehr interessante Seite, wie ich dann auch festgestellt hab.

Ich hab mir die gar nicht mal genauer angeguckt, aber gibt's da noch mehr Tools, oder?

Mhm, ja, es gibt so 'n paar, es gibt so 'n paar nette, nette Artikel, ja.

Okay. Also die, dieser Generator und, noch, CSS Sprites Punkt com, das ist noch ein weiterer Generator, machen eigentlich so einigermaßen das Gleiche.

Ja, wobei der zweite, den fand ich 'n bisschen unkomfortabler, aber.

Ja, das stimmt. Und auch 'n bisschen, schlichter gehalten.

Spartanisch, ja.

Ist ja auch noch Alpha, wie es da steht. Die, die, die, da kann man, den kann man einfach halt seine Bilder, hochladen und der Gener-- und diese Generatoren generieren dann, dieses Sprite und das dazugehörige CSS dafür.

Sehr praktisch. Ja, schön. Bei dem ersten, den wir angeben werden, das ist ein Sprite-Generator von Website Performance Punkt org. Schön ZIP-Datei, alle Bilder hochladen und, kann man noch ein paar Einstellungen vornehmen. Unter anderem werden dann auch gleich so, es wird gleich versucht, die Bugs abzufangen, die wir angesprochen haben. Also man erlässt genug Abstand zwischen den einzelnen Bildern und so weiter und so fort und, sehr komfortabel.

Ja, genau. Und, dann gibt es noch Offline-Tools. Da eigentlich nur, also mir sind da nur, ist da nur ein einziges runtergekommen in zwei Variationen. Einmal Smart Sprites für, in Java geschrieben und Smart Sprites, die PHP-Konvertierung davon.

Das, sind, sind Tools, da sind so, sind CSS Preprocessoren sozusagen, die, da schreibt man dann in seinem CSS bestimmte Kommentare, die dieses Tool versteht und, da dann anhand dieser Kommentare werden dann, werden dann die Hintergrundbilder, also einige Hintergrundbilder, die dann speziell ausgezeichnet wurden, so mit diesen Kommentaren, werden dann ersetzt durch, Sprites. Das ist auch, auch sehr mächtig, die Tools.

Und, was, was halt, hier, von Vorteil ist, man kann die in seine, seine Bildumgebung einbauen. Zum Beispiel sind die auch handkompatibel.

Das habe ich jetzt nicht ganz verstanden. Das ist mir nämlich neu. Du, das heißt, du hast quasi 'n, 'n, die Bilder an irgendwelchen Speicherorten, markierst in dem CSS durch Kommentare, dass zum Beispiel in einem, in einer Klasse jetzt das Hintergrundbild Ausgetauscht werden soll und diese, diese, diese Programme gehen hin und generieren quasi aus diesen, Anweisungen in den Kommentaren ein CSS Sprite.

Genau, ja, und, ersetzen dann auch gleich in dem, in dieser CSS-Datei diese, die, diese Background-

Anweisungen.

Anweisungen.

Die Background-Anweisungen und die Positionen.

Genau. Genau, also da-

Das ist ja mal, nett.

Da musst du dann nix mehr weiter machen. Du hast dann, du hast dann eine neue CSS-Datei und, und diese, Sprite-Dateien. Und, die kannst du dann direkt verwenden.

Also du baust quasi die Webseite so wie sonst auch und, das macht es quasi automatisch. Nice. Cool.

Ja, und das, das kann auch, halt, mit Besonderheiten umgehen, die wir jetzt noch gar nicht so richtig angesprochen haben, wie repeat X und repeat Y. Also da könntest du dann zum Beispiel für alle repeat X, Sprites, eine, ein, eine Sprite-Datei erstellen und eine für alle repeat Y Sprites eine andere. Und der gleiche-

Anders wird es ja auch nicht gehen. Also, -

Genau, anders wird es nicht gehen, aber das, das unterstützt das halt auch. Und, berechnet dann auch gleich die, da muss man natürlich, wenn man da diese, diese rep, repeat Optionen verwenden möchte, muss man, muss man ja in dem Sprite Da, in der Sprite-Datei, diese, dein Hintergrundbild, aneinanderreihen.

Also du musst ja, wenn, wenn das eine Hintergrundbild ist, ist jetzt fünf Pixel breit und das andere Hintergrundbild ist sieben Pixel breit, und die möchten, möchten beide in der Breite halt, also möchten repeat X haben. Dann, wenn sie in den Sprite gepackt werden, sollen, dann, dann müssen die ja-

Beide sieben Pixel breit sein.

Ja, oder, fünf mal sieben Pixel. Also, also der Smart Sprite macht das dann automatisch so, dass die-

Ja, okay.

Dass, dass er das dann vergrößert. Genau.

Okay, ja, ja.

Das kleinste gemeinsame Vielfache.

Ja. Cool, das ist cool. Muss ich mir mal angucken. Das klingt gut. Ja, die Links müssen wir euch nicht vorlesen. Die packen wir einfach so dazu. Eben zu dem Artikel von Dave Shear und, von Gerrit von Aken und, auch den Webkrauts Artikel und die Yahoo. Wie hießen die Jungs? Exceptional.

Performance, irgendwas danach. Weiß ich jetzt auch gar nicht.

Leute. Ja, die Exceptional, von den Exceptional Performance Leuten von Yahoo. Eine kurze Alternative in Anführungsstrichen, Anführungsstrichen wollen wir noch kurz ansprechen. Die werden wir auch mit verlinken. Und zwar, ein netter Artikel von, Materie, Materie Design. Ich vermute, Materie ist der, Autor. Denke ich. Okay. Auf jeden Fall, da geht es quasi um ein CSS Cache mit, Base64-Codierung als Alternative zu CSS Sprites. Vielleicht erklärst du ganz kurz was zu Base64-Codierung.

Es ist nämlich jenseits meines Programmier- und IT-Verständnishorizonts.

Ja, das ist ein, einfach eine, weißt du, was ASCII ist, oder? Ja, auf jeden Fall kann, kann man, kann man damit binäre Dateien, in, in eine andere, Codierung überführen, die, die halt auch, auch in normalen Textdateien untergebracht werden kann. Also es ist einfach diese, zweihundertfünfundsechzig, Zeichen des, des acht Bit, Zeichensatz werden dann auf vierundsechzig, Zeichen überführt.

Also es ist nicht das, wie wenn ich, wenn ich ein Bild in, wenn ich ein Bild im Wordpad öffne, ja? Das ist nicht das.

Nee, nee, da hast du dann recht. Das ist wie Binärdaten dann vorliegen, aber- Das, das sind eigentlich wirkliche, Konvertierungen, die man dann vornehmen muss. Die, die dann, wirklich dann auch das, die Daten größer machen natürlich, ne. Genau. Und, einige Browser unterstützen halt auch, Hintergrundbilder oder generell Daten, direkt als Base64 codierte Strings übergeben zu bekommen. Der Internet Explorer ist da nicht dabei. Wer hätte das gedacht?

Ich wollte gerade sagen, eine ganz große Überraschung. Der Internet Explorer nur, also jetzt auch sieben und acht oder nur sechs?

Acht, acht weiß ich gar nicht. Also sechs und sieben auf jeden Fall. Acht weiß ich nicht. Das, das, müssen uns unsere Hörer sagen. Deswegen halt, nur Alternative in Anführungszeichen, weil, der, den Internet Explorer gibt es ja nun mal und wird halt auch einigermaßen häufig verwendet. Und, diese Alternative wäre, wäre dann halt nur für Firefox, WebKit und neuere Operas besser als, als, einzelne Dateien in einzelnen Hintergrundbilder zu haben.

Okay. Ja, wer mag, kann sich das noch mal angucken. Und dann noch ein kurzer Hinweis:, man kann natürlich auch schön HTTP, Requests, HTTP-Anfragen, zurückschrauben, indem man, auch Jase, JavaScript und CSS-Dateien, zusammen schreibt.

Es gibt da auch ein nettes Tool, wo ich den Link mit in die Show Notes reinschreiben werde, das Diese zum Beispiel, packt, also komprimiert und zusammenfasst, sodass man dann halt in, im Quellcode eigentlich nur noch eine JavaScript-Datei referenziert, und eine CSS-Datei und alle anderen da drin sind, aber man selber noch schön an unterschiedlichen CSS-Dateien arbeiten kann. Hat auch Vor- und Nachteile, ganz klar. Ist aber auch vielleicht mal ganz nett.

Ich hab letztens eine Webseite umgesetzt mit irgendwie sieben jQuery-Plugins und, das ist dann halt, sind dann wieder sechs, HTTP-Requests mehr, die man sparen kann.

Ja, das bringt's auf jeden Fall, ja klar. Da kan-- Dann dieses Tool unterstützt, ich weiß jetzt grad nicht, welche Tools, welches Tool du da jetzt, im Auge hast, aber die meisten unterstützen dann ja auch so was wie, wie, GZIP Compression und so. Also das bringt's dann ja natürlich dann auf jeden Fall.

Ja. Ich werd das auf jeden Fall noch gleich raussuchen und dazu packen, den Link. Ja, das war, wenn du nicht noch was auf dem Schirm hast, das unser Thema heute, CSS sprites total. Wie sieht das bei dir aus?

Mhm, ja doch, das war's auch von mir. Aber jetzt, hast du ja noch mal 'n Jingle abzuspielen, glaub ich, ne?

Genau, ich hab noch 'n Jingle abzuspielen, und zwar den hier.

Aktuelles.

Genau, wir wollen noch auf eine Veranstaltung hinweisen. Da hatte uns David einen, Hinweis hinterlassen, und zwar auf die Flash-Plattformkonferenz FFK09 in Köln, organisiert von Marc Thiele, Sascha Wolte und dem Flash Forum. Wir finden das vor allen Dingen wichtig, weil man ja immer auch mal wissen muss, wann man wo sich vielleicht mal 'n Tag freinnimmt, um hinzufahren. Konferenz am 28., 29. April mit über 20 einstündigen Vorträgen und, dazu zwei Workshop-Tage am 27. April und am 30. April.

Fokus auf, Applikationen rund um Consumer und Ent-- und rund um das Consumer- und Enterprise-Segment auf Basis von Flash, Flex, Air und Silverlight. Jo. Ich denk, das war's.

Ja, diesmal ein, eine Sendung unter einer Stunde.

Ein Wahnsinn. Ganz zum Abschluss noch einen fetten Applaus, ja, weil Daniel, du hast heute nicht nur deinen Safari abgeschossen, sondern du bist auch offiziell nicht mehr Student.

Ja, richtig.

Es ist ein Wahnsinn. Wir sind alle begeistert. Gratulation.

Ja. Wurde auch irgendwann mal Zeit.

Das wollte ich nicht gesagt haben. Okidoki. Schönen Dank fürs Zuhören euch. Wir freuen uns auf eure Hinweise. Solltet ihr noch bessere Alternativen haben, irgendwo einen Bug auf dem Schirm, den wir übersehen haben oder nette Tools zum Thema, dann könnt ihr uns gerne einen Kommentar hinterlassen. Selbstverständlich freuen wir uns auch über Themenanregungen und, generell darauf, dass ihr nächste Woche wieder dabei seid. Tschüss und bis bald.

Ja, ciao.

Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web.

Weitere Informationen und die Links zur Sendung auf Technikwürze.de.