nicht angemeldet
suitOb eine Grafik jetzt 100 oder 200 kB hat ist weniger tragisch "schlimm" sind idR. viele HTTP-Request. Das macht besonders Browser wie dem Internet Explorer oder dem Firefox Probleme.
Versteh' ich das richtig, dass man also eher darauf achten sollte, möglichst wenige Grafiken einzubeziehen, anstatt diese möglichst klein zu halten?
Wieviel Overhead fordert so n'HTTP-Request denn im Mittel?
Das ist verschieden - es hängt von der Browserkonfiguration ab (was er denn so in den Request-Headern mitschickt) und was der Server Antwortet (da ist oft ziemlich viel Mist dabei wo dir lang und breit erklärt wird, welche PHP-Version denn nun drauf ist usw).
Ein Beispiel hier im Forum:
diese Grafik ist 81 Byte groß.
Der Request-Header den mein Opera schickt um diese Datei anzufordern ist 682 Byte groß, der Response-Header des Servers (304 Not Modified) hat 252 Byte - zusammen sind das 934 Byte, in Summe mit dem zu übertragenden Bild also 1015 Byte, also rund 1 KiB. Also benötigt allein der HTTP-Verkehr (ohne die Zeit jetzt zu rechnen) 92% des gesamten Datenaufkommens.
Und von dieser Sorte Grafiken (vornhemlich Icons) gibt auch hier im Forum mehr - solche Grafiken fasst man sinnvollerweise in Sprites zusammen (sagte Martin ja schon).
Wenn du z.B. 20 Icons hast, wären das 20 KiB die zu übertragen wären - zusammengefasst in eine einzelne Grafik sind es dann aber nur noch rund 2 KiB.
Das hört sich zwar jetzt vom Datenvolumen nich viel an - ist es auch nicht, denn ein ordentliches Foto hat schon rund 500 KiB aufwärts - aber die Anzahl der HTTP-Requests ist das, was die Sache langsam macht.
Der HTTP-Stack unter Windows kann (wenn ich mich recht erinnere) nur 8 requests gleichezeitig absetzen (bzw. 10, aber 2 davon sind reserviert - z.B. für das Windows Update) - wenn du also jetzt 20 Grafiken anforderst, müssen die ersten 8 HTTP-Requests beantwortet werden, dann nochmal 8 und dann die restlichen 4 (oder halt verschränkt).
Der HTTP-Request dauert bei oben genannten Bild bei mir im Schnitt 50 ms - macht bei 20 Einzelgrafiken bereits (wenn man von 8 parallelen Requests ausgeht) rund 150 ms Wartezeit. Und das ist meistens nicht alles - da hat man noch ein paar JavaScript-Files die geladen und ausgeführt werden müssen, ein paar größere Bilder die einen der möglichen Request länger blockieren - und schon ist man selbst bei einer einfach anmutenden Seite mit nur ein paar Verzierungsbildchen auf einer beachtlichen Anzahl an Sekunden die es dauert, bis wirklich alles geladen ist.
Beispielsweise die Runde-Ecken-Sache die ich im anderen Ast erwähnt habe: ohne Sprites braucht man für eine Runde-Ecken-Lösung 8 Einzelgrafiken - dann hat man z.B. noch 5 verschiedene Rahmenfarben - das braucht auch jeweils 8 Grafiken. Schon sind wir bei 40 Grafiken nur für ein paar kleine Rahmen die sich auch mit CSS machen lassen.
Der Martin