wahsaga: Performance beim Kacheln von kleinen Bildern

Beitrag lesen

hi,

nehmen wir an, ich habe für meinen Seitenhintergrund ein Bild, welches ziemlich klein ist (2px*2px). Dieses muss beim Seitenaufruf vom Browser heruntergeladen werden und wird dann horizontal und vertikal gekachelt. Ich könnte das Bild auch vergrößern (20px*20px). Das Bild würde etwas größer werden, würde aber noch genau gleich aussehen, weil ich einfach das 2px*2px kleine Bild, solange nebeneinander gereiht habe, bis es 20px*20px groß ist. Nun stellt sich mir die Frage, ob der Browser nun nicht mehr so schwer schufften muss, weil er nicht so viel kacheln muss.

Ja.
Einen wirklichen Beleg kann ich dir dafür nicht liefern - aber meiner subjektiven Erfahrung nach ist dem so. (Opera reagiert in der Hinsicht besonders heftig, insb. wenn auch noch Alphatransparenz hinzukommt.)
Macht sich dann auf etwas schwächeren Rechnern oftmals auch insb. beim Scrollen bemerkbar.

Den angesprochenen "Flaschenhals" bei der HTTP-Übertragung kannst du absolut vernachlässigen.
Dein 2*2px-Bild kann maximal vier unterschiedlich farbige Pixel haben, also 4*24 Bit (Farbtiefe) = 4 * 3 Byte = 24 Byte an reinen Bildinformationen.
Nehmen wir da mal noch 1 KB an Grundinformationen des Bildformates und sonstigen Meta-Daten hinzu, und noch mal pauschal 1 KB für den reinen HTTP-Request, sind wir bei ca. 2 KB.
Wenn du jetzt ein 20*20px-Bild nimmst, sind das ((20*20)-(2*2)) * 3 = 1188 Byte mehr - aber noch ohne Komprimierung. Wenn du ein 2*2px großes Motiv einfach nur durch Wiederholung auf 20*20px Größe bringst, lässt sich das ziemlich gut komprimieren - es dürften also effektiv vermutlich nur ein paar Dutzend Byte an Bildinformation übrigbleiben.
Die paar Byte machen aber bei einem HTTP-Request den Kohl nicht fett.
Die Rechenleistung, die der Browser zum Nebeneinanderlegen des Bildmotivs braucht, aber u.U. schon eher.

Deshalb würde ich auch eher noch ein größeres Bild draus machen, 100*100 oder meinetwegen auch 200*200px.

gruß,
wahsaga

--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }