2009-10-01 9 views
7

Zum Beispiel, würde ein 1x1 Bild schneller laden als ein 2x2? Die Größe wäre kleiner, aber der Browser müsste doppelt so viel arbeiten, oder?Gibt es eine ideale Größe für Hintergrundbilder?

Gibt es also eine ideale Größe und Form (Quadrat gegen Rechteck) für Hintergrundbilder?

Ich weiß, es ist wahrscheinlich nicht so wichtig, aber ich bin interessiert zu wissen.

Danke

Antwort

4

Ich glaube nicht, dass es eine ‚ideale‘ Größe für Ihr Bild ist.

Obwohl die Qualität des Bildes eine Rolle in der Download-Zeit spielen wird. Ein Bild mit eingebetteten Farben ist im Vergleich zu einem anderen Bild mit derselben Größe sehr groß.

Schließlich wird die Wahl eines Hintergrundbildes völlig hängt von Ihrem Bedarf. Wenn Sie ein 2 * 2-Bild benötigen, müssen Sie das hinzufügen.

Wenn Sie die Leistung einer Website mit viel Hintergrundbildern zu optimieren, dann können Sie bei

CSS sprites

und einige Werkzeuge zur Bildoptimierung einen Blick

12 Really Useful Image Optimization Tools For Web Designers

+0

CSS Sprites ist ordentlich ... Danke für den Link – guerda

3

Ich habe festgestellt, dass das Kacheln von sehr kleinen Bildern (wie 1 × 1 oder 2 × 2) in vielen Browsern sehr langsam ist. Da es bei den meisten komprimierten Bildformaten fast keinen Nachteil gibt, mit Wiederholungen größer zu sein, denke ich, dass man zumindest für das Tiling von Bildern Bilder mit mindestens 50 × 50 Pixeln wählen sollte, um die Zeichenkomplexität im UA zu reduzieren.

2

Interessante Frage. Sie müssten jeden der Browser-Anbieter fragen, da sie unterschiedliche Möglichkeiten zum Rendern von Bildern haben.

Aber in der Realität, ignorieren die Download-Zeit jeder Unterschied in der Rendering-Zeit vernachlässigbar sein, so ist es sinnvoll, nur ein kleineres Bild zu verwenden, wenn Sie können.

Ich werde auch darauf hinweisen, dass wenn Sie ein 1x1 wiederholendes Bild verwenden, sollten Sie stattdessen eine Hintergrundfarbe verwenden.

+0

In einigen Fällen benötigen Sie möglicherweise ein Bild anstelle einer Hintergrundfarbe, da die Farben nicht immer genau gleich angezeigt werden. – Guffa

+1

Guffa: Gleiches gilt für Bilder. Und im Idealfall sollten die Algorithmen zur Bestimmung der angezeigten Farbe für Volltonfarben und Bilder gleich sein. – Joey

+1

Vielleicht möchten Sie eine halbtransparente PNG-Bild – Eric

2

Die ideale Größe würde sich von Browser zu Browser unterscheiden, von einem System zum anderen.

Vermeiden Sie, es zu klein oder zu groß zu machen. Ein Hintergrundbild der Größe 1x1 kann in einigen Browsern Renderprobleme haben. Sie sollten es mindestens ein paar Pixel in jeder Dimension machen.

Ich erinnere mich, dass Netscape 4 Bilder nicht zu wiederholen, wenn sie weniger als etwa zehn Pixel breit waren. Browser sind heute weniger sensitiv, aber es macht immer noch Sinn, die Bilder nicht zu klein zu machen.

Die Komprimierung von Bildern (zumindest für GIF- und PNG-Bilder) basiert auf Wiederholungen. Wenn Sie also das Bild vergrößern, indem Sie es wiederholen, fügt die zusätzliche Bildgröße nur sehr wenig zur Dateigröße hinzu.

2

Nur zu beachten: Wenn Sie versuchen, den Download zu beschleunigen, den Aufwand für das Herunterladen von 1x1 Bild vs.etwa 10x10, ist vernachlässigbar, besonders für anständig komprimierte Bilder - sowohl für den Client als auch für den Server.

Daher, da das Rendering mit 10x10 definitiv schneller/besser ist, gehen Sie für eine größere Bildgröße.