Repeating Website Hintergrundbild - Größe vs Geschwindigkeit

Question

Ich habe mich gefragt, ob jemand irgendwelche Tests mit Hintergrundbildern getan hat. Wir schaffen einen Hintergrund, der normalerweise repeats mindestens in einer Richtung (x oder y oder beide).

Beispiel:
Lassen Sie uns sagen, dass wir einen Gradienten Hintergrund, dass wiederholt in X-Richtung haben. Gradient Höhe ist 400px. Wir haben mehrere Möglichkeiten. Wir können so klein wie möglich Bild erstellen (1 Pixel Breite und 400 Pixel hoch) oder wir können ein größeres Bild mit 400 Pixel Höhe erstellen.

Beobachtung
Da Gradient 400 Pixel hoch ist wahrscheinlich werden wir nicht GIF-Format wählen, weil es nur 256 adaptive Farben speichern kann. Vielleicht ist das enaough wenn unser Gradienten subtil, da es nicht so viele hat, aber ansonsten werden wir wahrscheinlich eher speichern Bild als 24-Bit-PNG-Bild, um eine vollständige Gradienten Detail zu erhalten.

Dilemma
Sollten wir ein Bild von 1 × 400 px Größe erstellen, die wiederholt werden n mal horizontal oder sollten wir ein Bild von 100 × 400 px Größe erstellen im Browser und eine größere Bilddatei zu beschleunigen Rendering Größe.

So. Bildgröße vs. Rendergeschwindigkeit? , die man gewinnt? Jede Sorge um dies zu testen? Im Hinblick auf die Browser-Rendering-Geschwindigkeit und möglichst kleines Bild redraw Flackern ...

Answer 1

Die Wiedergabegeschwindigkeit ist der Engpass hier, da größere Fliesen können in den Browser-Cache gestellt werden.

Ich habe dies tatsächlich versucht, für die gängigen Browser und zumindest einige von ihnen gemacht merklich langsam auf sehr kleinen Fliesen.

Also, wenn die Bitmap-Größe Erhöhung nicht in Folge hat lächerlich große Dateigrößen, würde ich auf jeden Fall mit dem gehen. Testen Sie selbst und sehen. (Denken Sie daran IE6 aufzunehmen, wie viele Menschen immer noch mit ihm stecken sind).

Sie könnten in der Lage, eine gute Balance zwischen Bitmap-Größe und Dateigröße zu schlagen, aber im Allgemeinen würde ich versuchen, 50x400, 100x400, 200x400 und 400x400 Pixel selbst.

Answer 2

Ich fand heraus, dass es ein großer Unterschied in der Rendering-Performance des Browsers sein kann, wenn Sie mit einer Breite von 1 Pixel ein Hintergrund-Bild haben und es zu wiederholen. Es ist besser, mit etwas größeren Abmessungen ein Hintergrund-Bild zu haben. So ein Bild mit einer Breite von 100 Pixeln führen viel besser in dem Browser. Dies kommt vor allem ins Spiel, wenn Sie ein wiederholtes Hintergrund-Bild in einer ziehbar Schicht auf Ihrer Website verwenden. Die Drag-Performance ist ziemlich schlecht mit einem oft wiederholten Hintergrund-Bild.

Answer 3

Ich mag, dass unten eine extra paar Zeilen zu senden für die Kosten hinzuweisen (1-2 nur Beispiel hier) .8k - 1,6 kb (wenn man mit 8-Bit-wegkommen kann) mehr wie 2,4 kb - 4,0 kb für 24bit

2 Pixelspalten mehr bedeutet, die erforderlichen Iterationen erforderlich, um den Hintergrund blitten in bis zu 1,6 kb bis 1/3 nach unten geschnitten wird (8-Bit) oder 4KB (24bit)

noch 1 zusätzliche Spalte Hälften der Blitten auf die Hälfte der Elementbreite erforderlich nach unten.

Wenn der Hintergrund getan in weniger als eine Sekunde für ein 56.6K Modem Ich denke, es ist mager genug.

Answer 4

Wenn kleine Abmessungen eines Bildes einen negativen Einfluss auf die Erweisung haben, bin ich sicher, dass jeder anständige Browser vor Fliesen das Bild intern ein paar Mal würde blitten.

sagte, dass, neige ich dazu, nicht mehr als 1 Pixelbild Abmessungen zu verwenden, so dass ich deutlich das Bild sehen kann, ohne Ändern der Größe. PNG Kompression ist gut genug, um dies zu Dateigröße zu sehr geringen Kosten zu handhaben, in den meisten Situationen.

Answer 5

ich Geld auf dem Engpass setzen würde das Bild herunterladen, anstatt das Rendering-Engine ist, um die Fliesen zu tun, gehen Sie so für die 1 Pixel breit Option.

Auch die 24-Bit-PNG sind überflüssig, da Sie nur noch 8 Bit pro Kanal bekommen (rot, grün und blau).

Answer 6

Ich ziehe es im Allgemeinen dazwischen zu gehen, breit 1pixel wird wahrscheinlich den Farbverlauf etwas unklar machen scheinen, aber man kann so etwas wie 5pixel Breite tun, die den Gradienten genug Platz gibt über die Seite Konsistenz und Klarheit zu erhalten .. aber ich würde empfehlen, können Sie weitere Muster und Bilder zu einem einzigen Bild hinzufügen und dann Hintergrund Positionierung verwenden ( CSS-Sprites ), um sie zu positionieren, weil herunterladen weniger Anfragen zu 5 40kb Bilder comapared nehmen würde an den Server ...

macht ein einzelnes Bild von etwa 50kb weniger Zeit, da der Browser

Answer 7

Ich habe nicht gebenchmarkt aber ich würde wetten, dass auf den meisten modernen Computer die Wiedergabe wird kein Problem sein, während Sie immer auf dem Bild Download-Zeit sparen möchten. Ich gehe oft für die 1px Art von Grafiken.