Pixelgröße für kachelbare Hintergrundgrafik
0 0 0 
Beat
0
2 
Gunnar Bittersmann
Pixelgröße für kachelbare Hintergrundgrafik
Hallo,
ich würde meiner Webseite gerne eine Hintergrundgrafik hinzufügen die Kachelbar ist. das will ich so per CSS machen:
background-image: url(../images/background.png);
Gibt es eine ideale Pixelgröße hinsichtlich Breite und Höhne für die Grafik "brackground.png"?
-
[latex]Mae govannen![/latex]
ich würde meiner Webseite gerne eine Hintergrundgrafik hinzufügen die Kachelbar ist. das will ich so per CSS machen:
background-image: url(../images/background.png);
Gibt es eine ideale Pixelgröße hinsichtlich Breite und Höhne für die Grafik "brackground.png"?
Ja: Immer so groß, wie es irgendwie machbar ist (durch das Motiv ist dies natürlich individuell beschränkt).
Eine Hintergrundgrafik mit 10x10px müßte auf einem 1000x700px Viewport 7000 mal gerendert werden, eine 100x100px-Grafik hingegen nur
70 Mal.Cü,
Kai
--
Even if you are a master of jQuery, you can only create mediocre (at best)
scripts. The problem is that the authors you rely on have not mastered the
DOM themselves. It's like one blind guy leading another off a cliff (D.Mark/clj)
Foren-Stylesheet Site Selfzeug JS-Lookup
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?-
Ja: Immer so groß, wie es irgendwie machbar ist (durch das Motiv ist dies natürlich individuell beschränkt).
Eine Hintergrundgrafik mit 10x10px müßte auf einem 1000x700px Viewport 7000 mal gerendert werden, eine 100x100px-Grafik hingegen nur
70 Mal.Hä, ich dachte umso kleiner umso besser, weil die Seite dann schneller wird? Du sagst jetzt genau das Gegenteil.
-
Hä, ich dachte umso kleiner umso besser, weil die Seite dann schneller wird? Du sagst jetzt genau das Gegenteil.
Eine 1x1px Kachel ist zum Rendern langsam.
Eine 10x10 px Kachel ist 100 mal schneller.Download-Zeit ist etwas anderes. Hier ist eine Kachel optimal die kleiner als 2kBytes ist. Aber das sagt nichts über die Grösse der Kachel in px aus.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
Grüße,
kommt drauf an - gekacheltes 2x2 ist im IE kaum scrollbar, in Opera dagegen problemlos - bei 1x1 würde ich aber echt bgcolor verwenden^^
heutzutage spielt die grafikgröße zudem kaum eine rolle - die 5-10kbyte fallen selten ins gewicht, rechenbelastung aber immer.
MFG
bleicher
-
-
-
@@Karl:
nuqneH
Gibt es eine ideale Pixelgröße hinsichtlich Breite und Höhne für die Grafik "brackground.png"?
Drei Dinge gilt es zu bedenken: zu übertragende Datenmenge, Speicherbedarf und Dauer des Seitenaufbaus.
Wird das Motiv in der Grafik horizontal und vertikal jeweils n-fach wiederholt (deren Pixelanzahl also n²-fach), steigt die Dateigröße (die zu übertragende Datenmenge) nicht auf das n²-fache, denn die Kompression holt da einiges raus. Ich habe dies für eine Beispielgrafik gemacht und jeweils als PNG-8 (16 Farben), GIF (16 Farben) und JPEG (Qualität: 60%) gespeichert:
║ PNG │ GIF │ JPEG
═══════════╬═══════╪═══════╪═══════
64 × 64 ║ 1 kB │ 1 kB │ 2 kB
───────────╫───────┼───────┼──────
128 × 128 ║ 2 kB │ 3 kB │ 6 kB
───────────╫───────┼───────┼──────
256 × 256 ║ 2 kB │ 8 kB │ 23 kB
───────────╫───────┼───────┼──────
512 × 512 ║ 5 kB │ 30 kB │ 87 kB(BTW: Bedingt durch das Grafikformat sind bei JPEG Vielfache von 8 als Länge/Breite besonders günstig. Bei GIF und PNG bin ich mir nicht sicher; ich verwende aber als Kantenmaß möglichst Zweierpotenzen.)
Anders stellt sich die Sache beim Speicherbedarf auf dem System des Nutzers dar: Der Browser dekomprimiert das Bild und hält es als Bitmap im Speicher. Das heißt, horizontal und vertikal jeweils n-fach wiederholtes Motiv in der Grafik benötigt auch n²-fachen Speicher. Wird der Arbeitsspeicher knapp und muss auf Festplatte ausgelagert und wieder eingelesen werden, bremst dies das System.
Andererseits beschleunigt es die Darstellung der Webseite, wenn Hintergrundbilder nicht so oft wiederholt werden müssen.
Das Optimum, wie oft das Motiv in der Grafik wiederholt wird, sähe für jedes System anders aus. Es gilt also einen guten Kompromiss zu finden.
Auf die zu übertragende Datenmenge hat die Anzahl der Wiederholungen wenig Einfluss; hier ist die Wahl des richtigen Grafikformats entscheidend. [GRAFIKFORMAT, GIF-JPEG]
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
