Wirklich große CSS-Sprites!
CSS-Sprites sind eine inzwischen selbstverständliche Technik für jeden CSS-Coder, der es ein bisschen ernst meint. Die Frage ist nur, wie weit man es treiben möchte mit dem Erstellen von zusammengefassten Bild-Dateien.
Dave Shea hat sich darüber Gedanken gemacht, und in den Kommentaren lässt sich auch das eine oder andere kluge Statement finden. Ziemlich bemerkenswert war für mich, dass beispielsweise MobileMe ein einzelnes 6042 Pixel hohes PNG für das Styling aller Control-Elemente verwendet. 6042 Pixel!
Ich bin in dieser Hinsicht noch ein wenig konservativer und fasse üblicherweise nur sortenreine Grafik-Elemente zusammen. Bei den meisten Websites, die ich mache, handelt es sich ja um eher schlichte Layouts, die auch nicht mit exorbitant hohem Traffic zu kämpfen haben – insofern kann ich das Thema entspannt angehen und muss selten mit dem Taschenrechner hantieren, was die x- und y-Werte in der Background-Positionierung angeht. Aber gut zu wissen, dass man das ganze auch im universellen Maßstab umsetzen kann, wenn es nötig ist.
Habt ich noch weitere interessante oder ähnlich riesige Beispiele für CSS-Sprites auf Lager?
Ingo am 3. Februar 2009 #
Ebenfalls gute Beispiele sind AOL und Yahoo
Moritz am 3. Februar 2009 #
Aktuell: Bahn.de
Cappellmeister am 3. Februar 2009 #
Nachdem die Apple-Datei auch nur etwas mehr als 50KB hat ist doch so wirklich optimal umgesetzt.
Matt am 3. Februar 2009 #
So viel Taschenrechner braucht man aber gar nicht, wenn man einfach die Koordinate der Ecke links oben der jeweiligen Grafik aus der Photoshop Infopalette verwendet und Minusse davor setzt.
Ralph von der Heyden am 3. Februar 2009 #
Die XING Sprites sind ganz interessant. Ähnlich wie MobileMe, nur anders angeordnet.
Andree am 3. Februar 2009 #
Danke dass du mich daran erinnert hast, aus meinen 5 Icon-Sprites ein großes PNG zu machen. Da alle Icons im gleichen Farbraum sind, spare ich mir nicht nur 4 zusätzliche HTTP-Requests, sondern dank prädiktiver Kodierung auch noch ein paar zusätzliche KB.
leo am 3. Februar 2009 #
Bei YouTube auch zu finden. Denke die hier gezeigten Beispiele machen vor allem bei großen Seiten mit einem automatischen Build-System Sinn – ich bleibe jedenfalls auch bei der Zusammenfassung »sortenreiner« Grafiken.
Brutos am 3. Februar 2009 #
Ich denke, dass man mit seinen Sprites unter 25kb bleiben sollte, da bestimmte Browser nicht mehr in ihren Cache aufnehmen wollen (-> Iphone safari) dazu noch die relativ langsame Internet Verbindung, also sind zwischengespeicherte Sprites sehr erwuenscht.
Sabrina am 3. Februar 2009 #
Ich denke, dass die meisten ist ein gutes Beispiel Yahoo.
Thomas am 3. Februar 2009 #
Der Nachteil ist halt, dass man die Bilder nicht mehr vertikal zentriert hinterlegen kann (bspw. bei Buttons), was bei Schriftskalierung schöner aussehen würde.
Gerrit am 3. Februar 2009 #
@Thomas: Ähnliches gilt für rechtsbündige Platzierung – da muss man auch tricksen, wenn das klappen soll.
Thomas am 3. Februar 2009 #
@Gerrit: Wobei das ja bei MobileMe relativ elegant gelöst ist. Oder wo siehst du genau das Problem?
Eric Eggert am 3. Februar 2009 #
Und wer auf den Taschenrechner verzichtet kann auch den Sprite-Generator verwenden: spritegen.website-performance.org
Gregor am 3. Februar 2009 #
Ich weiß nicht genau, wie es die anderen machen, aber XING nutzt blind gifs, um die Icons aus dem Sprite nutzen zu können. Ist das die Rückkehr des Blind Gifs? Oder scheut ihr das zusätzliche Markup im Quellcode?
Ich persönliche finde die Idee gut und die img-tags eingnen sich hervorragend dazu. Für mich überwiegt der Vorteil bei den Ladezeiten den Nachteil des zusätzlichen Markups.
Was haltet ihr davon?
wheely am 3. Februar 2009 #
Nicht extrem groß, aber an prominenter Stelle:
Die Startseite von Google-Firefox (google.de/firefox) verwendet auch Sprites.
http://www.google.de/images/firefox/sprite.png
Björn am 3. Februar 2009 #
Ich habe das ähnlich wie Xing gemacht, bin dann aber auf gif umgestiegen wegen des ie-bugs mit der Positionierung von pngs. Dann ist man leider mit den Farben ziemlich schnell am Ende…
Alexander Gerl am 4. Februar 2009 #
Sollte man lieber mehrere PNG-8 nehmen oder alles in ein PNG-24 Bit pressen?
Ralph von der Heyden am 4. Februar 2009 #
@Alexander: Je nach dem. Am besten beide Varianten ausprobieren, und die Größe des PNG-24 mit der Summe der PNG-8-Dateien vergleichen. Mehr Dateien bedeuten mehr Latenzzeit, mehr Übertragungsvolumen mehr Übertragungszeit. So einfach ist das. Am Ende ist das immer ein Kompromiss.
Lippe am 5. Februar 2009 #
Google nutzt auf den Ergebnisseiten auch ein Sprite: Link
Ralph von der Heyden am 5. Februar 2009 #
Ach ja, wenn wir schon über PNGs reden: Nicht vergessen, die Bilddateien durch einen der zahlreichen PNG-Optimierer zu jagen. Das spart im Schnitt noch mal 20% der Dateigröße. Unter OSX eignet sich das Dashboard-Widget PNGpong vorzüglich.
Michel am 5. Februar 2009 #
Wie wärs denn noch mit HSE24?
Die haben einen Relaunch hingelegt, wie ich gerade bei horizont.net erfahren habe. Und dann direkt sowas ;)
Ralph von der Heyden am 5. Februar 2009 #
HSE24 ist ein schönes Beispiel für das Potential von PNG. Ich habe gerade mal GIF und PNG verglichen:
GIF: 35 KBytes
Mit Vorschau als PNG gespeichert: 139 KBytes
Durch PNGpong gejagt: 16 KBytes
Richtig komprimiert ist das PNG also sogar deutlich kleiner als das GIF! Die Komprimierung von PNGpong arbeitet übrigens verlustfrei, ein Qualitätsnachteil ist also nicht zu erwarten.
Alexander am 11. März 2010 #
Also diese PNG Pong kann ich zwar unter meinem Mac OS 5.8 installieren, aber wie soll ich da Dateien vom Finder draufziehen wenn es im Dashboard geöffnet ist?
FLHH am 22. April 2010 #
@Alexander
Ich habe das so gelöst, dass man den Developer-Modus für Widgets aktiviert, das ist relativ einfach. Schau mal hier:
http://www.macosxhints.com/article.php?story=20050422172929402
Danach kann das PNGPong Widget auf dem Desktop abgelegt und PNGs darauf gezogen werden.