Sven Rautenberg: Performance beim Kacheln von kleinen Bildern

Beitrag lesen

Moin!

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. :)

Es entspricht realer Beobachtung, dass Browser mit Hintergrundbildern im Winzigformat mehr Arbeit haben und Dinge langsamer funktionieren, als wenn Bilder in größeren Formaten verwendet werden.

Wenn ich z.B. ein Streifen-Hintergrundbild (vertikal oder horizontal) erstelle, lege ich das Bild üblicherweise 8 oder 16 Pixel breit an (8 Pixel ist die Breite einer Kompressionseinheit im JPEG-Format, auch wenn ich GIF oder PNG verwende - was anderes als Vielfache von 8 sind nur nötig, wenn das Bild das erfordert, weil z.B. ein 10 Pixel breites Muster dargestellt werden muß), und entsprechend so hoch, wie nötig.

Im Gegensatz zum denkbaren 1x1px-Hintergrund hat ein Browser bei einem 8x8px-Hintergrund 64 mal weniger Bilder zu kacheln. Das macht sich bei langsameren Rechnern durchaus bemerkbar, vor allem auch beim Scrollen oder bei Animationen. Noch größere Bildformate sind logischerweise entsprechend ressourcenschonender, allerdings muß man das gegenüber der Dateigröße abwägen.

- Sven Rautenberg

--
"Love your nation - respect the others."