ich habe teilweise mit Kopfschütteln die Beiträge gelesen, ne ne!
Wozu die ganze Aufregung - alles hat sein Pro und Kontra!

Webdesigner, die sich Gedanken über die Gestaltung einer Webseite machen, werden jeder für sich ein Maß finden, dies so oder so einzusetzen... ich meine, wer eine Firmenseite gestaltet, kopiert sich nicht nur Source-Code irgendwo heraus und stückelt hier und da was zusammen!

Die meisten behaupte ich mal, werden bei Kenntniss über einige Pro und Kontras ein Mittelmaß wählen und die Sprites ihrer Webseite in MEHRERE Grafiken aufteilen, werden wahrscheinlich auch einzelne Sprites nachladen, wo es eher Sinn macht.

Ein Pro-Argument, das ich mal von einer Firmenseite gehört habe, ist:
"Die Browser machen es einem heute sehr leicht, einzelne Bilder einer Webseite zu klauen und selber zu benutzen, selbst wenn 1x1 Pixel im Vordergrund stehen und der Sprite als Hintergrund basiert - Es macht Bilderklauern viel zu viel Arbeit, sich die gefunden Sprites aus einer Gesamtgrafik zu "schneiden", wenn sie solche auf anderen Seiten einfach fertig(!) klauen bzw. speichern können!"

Das Argument finde ich gut !!!
Und teilt man die Sprites noch klever in mehrere kleinere Grafiken (evtl. max. 100kb) auf, je nach Kategorie der Webseite oder Rubrik, dann finde ich das einen gelungenen Kompromiss!

Ansonsten - alles wird GUT ... xD

Viel Spaß beim CSS,
beste Grüße
Steev

CSS Sprites sind durchaus sinnvoll, gerade wenn man sich, wie wir Webentwickler, auch mit Themen wie IE 6 beschäftigen muss. Ein alter IE kann nunmal nur 2 HTTP Requests gleichzeitig abfeuern. Ergo ist CSS Sprites extrem sinnvoll. Und auch in Navigationsleisten sind diese ebenfalls sinnvoll, sollte man einen Hover Effekt nutzen. Denn auch wenn man sagt, das man beileibe nicht jeden Link klickt bei dem Besuch einer Webpage, so werden doch trotzdem viele Hover Effekte geladen, während man mit der Maus sinnlos durch die Gegend eiert, ergo werden diese Bilder, falls man es so löst, ebenfalls geladen.
Und dieses Speicher Argument ist nunmal leider an der oberen Grenze zur Lächerlichkeit.
Ein .gif mit icons oder ein paar Background images ist keine 100kb groß. Sagen wir in der Sprite datei sind 100 icons und die datei ist 100 kb groß, so wäre durch meta daten, verschlüsselung etc. das Volumen wenn man nur 50 der icons so zieht bereits größer.
Natürlich muss man differenzieren, wann dieses Verfahren Sinn macht. Aber für jeden Hover Effekt einen http request zu starten ist höchst fragwürdig.

So long

Ab welchen Browserversionen wird diese Sprites-Technik unterstützt?

Warum ich überhaupt Sprites nutzen möchte:
Bei einigen meiner Seiten flackert das hover-Bild (CSS) beim ersten "Rüberfahren" mit der Maus. Das finde ich nicht schön, weil es die "Programmierung" nicht rund wirken lässt.

Anwendungsbeispiel:
Ich habe jetzt eine Navigation die im normalen Linkzustand einfach nur eine Hintergrundfarbe hat. Wen ich also mit der Maus nicht auf dem Link bin, ist der Hintergrund z.B. rot. Diese Farbe vergebe ich mit "background: FARBE;"

Die Hovergrafik soll nun z.B. ein Icon vor dem Navigationstext enthalten.

Wenn ich jetzt also eine in der breite verdoppelte Grafik nehme, die eine Hälfte mit der Hintergrundfarbe des Links im "Normalzustand" einfärbe und die andere Seite mit Hintergrundfarbe und Icon versehe, ist das dann noch effektiv?

Das Problem mit den flackernden Hover-Bilder sollte damit behoben werden, aber die Größe der Grafik wächst natürlich. Wie groß sollte das Sprites-Bild höchstens sein, damit es schnell läd?

Danke!

Ich frage mich gerade, ob ein Browser auch immer Bilder am Rand abschneiden muss...
Könnten evtl. andere Reader das Bild komplett und damit überlappend darstellen?

Das tun die sicherlich nicht deshalb, weil sie eingefleischte Javahasser sind, sondern weil in der Entwicklung von modernen Webanwendungen und Internetpräsenzen die Usability (und somit auch Ladezeiten und Fehleranfälligkeit) im Vordergrund stehen.

Wie auch immer, ich habe diese Technik auf etlichen URLs angewendet und finde sie einfach zu warten und leicht einzubinden.

CSS ist heute nunmal einfach klasse!

Ergo: Der Effekt der durch CSS-Sprites gesparten Requests muss selbstverständlich einen evtl. überflüssigem Traffic positiv entgegen stehen. Wenn man eine große Navi mit nicht optimierten Bildern (pro Grafik > 50 kb) mit CSS-Spites umsetzt, ist man selber Schuld und es tritt genau das ein was Ralf sagt: es werden unnötige Daten übertragen. Nutzt man CSS hingegen bei einer kleinen Navi mit Bilder, die jeweils 10kb oder kleiner sind sodass das ganze Sprite unter 100 kb bleibt, so kann eine Umsetzung mittels CSS-Sprites durchaus sehr sinnvoll sein. Gerade aber wenn man Sptites nicht nur für die Navi sondern auch für andere Designelemente der Seite nutzt (weil man z.B. runde Ecken auch im IE haben möchte) fährt man mit CSS-Spites besser, da diese Grafiken in jedem Fall geladen werden.

Trotzdem sind CSS-Spites etwas für Fortgeschrittene. Wer keine Ahnung hat Bilder für's Web zu optimieren oder sinnvolles HTML zu schreiben, der braucht sich damit gar nicht erst zu beschäftigen. Vielleicht kommt ihr beide ja auf diesem Nenner zusammen.

micha

@Ralf:
Fakt ist, wenn Google es nutz (Sprite), dann ist es gut
(siehe Link)

Und nur, weil ich sage, dass man im Jahre 2008 durchaus moderne Techniken zur Websitegestaltung nutzen kann (und sollte), habe ich _nirgends_ behauptet, dass das in knallbuntem Augenkrebsrisiko enden soll. Les endlich mal die Kommentare und diskutiere auf dieser Basis, nicht auf deiner steifen 1998-Entwicklungsebene.

Und, 2004 (!) hat A List Apart das erste Mal großartig über CSS Sprites geschrieben, und das sind vier Jahre. Und vier Jahre haben nichts, aber auch gar nichts mit „neuen Gimmicks“ zu tun!

Und nochmal extra zwei Links für dich. Bin ja nicht so …
eins
zwei

Habe fertig.

Schreit eine Webseite mich an, knallt sie mich mit Informationen, Effekten und Pipapo voll, kaufe ich definitiv nichts. Genau solche Grundeinstellungen, Webseiten MÜSSEN knallbunt sein um erfolgreich zu sein, zeigen das der Kunde und seine Wünsche von Vorne bis Hinten ignoriert wird. Welcher Kunde kommt denn an und sagt das er nichts gekauft hat weil die Webseite zu langweilig war?
Gerade hier ist weniger viel Mehr. Dem Kunden die Informationen geben die er braucht, ihn nicht mit Klickibunti nerven und schon gar nicht mit zwanzig tollen Kirmeseffekten vom Kauf abhalten weil sein IE5 die nicht anzeigen kann und stattdessen lieber abschmiert.
da merkt man das Webdesigner nach Aufwand bezahlt werden. Noch ein Bildchen mehr, nochmal 50 Euro verdient. Und damit der lahme Server nicht schlapp macht, denkt man sich krude Techniken aus um das ganze Gedrösel doch noch an den Mann zu bringen.

Vielleicht solltest du dir mal vor Augen halten das nicht alle Netzbenutzer so netzaffin sind das sie täglich mit neuem Quatsch überrascht werden müssen. CSS-Sprites finden mit Sicherheit ihren Platz (siehe Beispiel von Jared). Aber bevor man sich Gedanken über neue Gimmicks macht, sollte man sich mal lieber überlegen ob das was man da so produziert, auch wirklich das ist was brauchbar (benutzbar) ist.

Und warum soll man auf halbwegs ansehnliche Darstellung im Jahre 2008 verzichten? Minimalistisch ist eines, das kann teilweise extrem genial sein. Aber Kundenwebsites lechzen nach „Überzeug mich, ich will dein Kunde werden“, da kommst du an modernen Techniken nicht vorbei.

Du hast natürlich recht, dass man sich an der eigentlichen Website totoptimieren kann, wenn der Server grützig konfiguriert ist. Aber es gibt eben Probleme und es gibt Ursachen.

Lies dir einfach mal Exceptional Perfomance von Yahoo durch und denk nochmal über das Thema nach.

Das ein Webdesigner schlau arbeiten sollte steht außer Frage. Aber wie wäre es denn damit auf Kinkerlitzchen und unnötige Effekthascherei zu verzichten? Vielleicht ist weniger der erste Schritt zum Mehr.
Sollte der Server dann immer noch leiden weil er zwei anstatt einem Request verarbeiten muss, sollte man sich ggf. mal die Einstellungen des Servers genauer anschauen. Eine andere Möglichkeit wäre auch sich mal Gedanken um eine andere Software zu machen. Auf alle Fälle würde ich als erstes den Server, Technik und Software optimieren als mit so schwachen Argumenten wie "ein paar Request einsparen" irgend einem Trend hinter her zu hecheln.