Grafikformate - Traffik

[Detlef G.]

Hallo bloonix

So wie das aussieht, hast du die Navi in genau zwei Teile zusammen,
gesetzt. Sowas hatte ich mir zunächst auch gedacht. Allerdings
spielte auch die Übertragung der Grafik bei mir eine Rolle.

Genau, desshalb zwei Grafiken im richtigen Format statt drei.

Die rechte und linke Navi-Grafiken sind jeweils 6x40 Pixel gross.

jeweils als JPG mit 515 Byte

Die mittlere Grafik ist 1x40 Pixel gross.

als JPG 435 Byte

Somit werden drei
kleinere Grafiken übertragen, was ziemlich fix gehen sollte und
weniger KB sind. Wenn ich insgesamt zwei Grafiken mit jeweils
400x40 Pixel erstellen würde, dann wären diese knapp 100 Mal Größer.

navi-left.png 603 Byte und navi-right.png 584 Byte

Liege ich da falsch?

Ja

Du vergisst dabei dass die Grafiken nicht als unkomprimierte Bitmaps gespeichert werden, sondern in einem komprimierenden Grafikformat. Dadurch kann es durchaus passieren, dass der Bildinhalt und die Wahl des dazu passenden Dateiformats einen größeren Einfluss auf die Dateigröße hat, als die Abmessungen.
Grafiken, die überwiegend durchgehende Farbflächen oder/und gerade Linien aufweisen können bei GIF und bei PNG (dort auch gleichmäßige Farbverläufe) sehr effektiv komprimiert werden.

Jetzt rechnen wir mal.
Bei deinem Beispiel muss der Browser drei Grafiken einzeln anfordern, also zusammem knapp 1,5 KB an Nutzdaten, dafür schickt er drei Anfragen an den Server und bekommt drei Antworten mit noch einmal jeweils etwa 1 KB an Headerdaten.
Das ergibt also etwa 4,5 KB.

Bei meinem Beispiel werden zwei Grafiken mit zusammen knapp 1,2 KB und zwei Header übertragen, das ergibt 3,2 KB.

In deinem Fall, bei festzementierter Seitenbreite würde auch eine Grafik von knapp 800 Byte reichen. Die zwei Grafiken erlauben dir aber diese für jede Breite bis maximal 1600px vewenden zu können.

Hast du die zwei Balken auch mit Gimp erstellt?

Nein, ich habe sie überhaupt nicht "erstellt".
Für navi-right.png habe ich einfach deine navigation-middle.jpg auf die entsprechend Breite gezogen und dann navigation-right.jpg draufgeklebt. Dann habe ich diese einfach horizontal gespiegelt um navi-left.png zu erhalten.

Mit Gimp arbeite ich nicht, damit habe ich mich noch nie wirklich beschäftigt. Ich verwende Ulead PhotoImpact 8, daran habe ich mich gewöhnt.

Auf Wiederlesen
Detlef