kleines Hintergrundbild bei hohen Auflösungen

[Tasnal]

Tag zusammen,

es geht um die Größe des Hintergrundbildes für meine Website.

Aktuell verwende ich ein Bild in Full HD Auflösung ( 1920x1080 Pixel ) um für die größtmögliche Standardauflösung der Website-Besucher gewappnet zu sein. Der Hintergrund scrollt dabei nicht, sondern ist "fixed".

Vor diesem Hintergrund läuft die eigentliche Seite ab, deren Divs eine feste Breite von 800 Pixeln zugeteilt bekommen haben.

Nun geht es mir um eine Dateigrößenreduzierung und hierbei habe ich es auf das Hintergrundbild abgesehen ( genau genommen sind es mehrere Hintergrundbilder, da jede Unterseite einen anderen Hintergrund hat ).

Wie wirkt sich die Darstellung des Hintergrundbildes bei Auflösungen aus, die größer sind als die Auflösung des Bildes ?

Wenn ich das bisher richtig gesehen habe, dann sieht man von einem 1920x1080er Bild bei einer Bildschirmauflösung von z.B. 1280x800 nur einen Ausschnitt ( was nicht weiter schlimm ist, da das Hintergrundbild eine Art Muster ist ).

Wie sieht die Sache aber aus, wenn ich das Bild auf 1280x800 verkleinere und jemand die Seite mit Full HD Auflösung ansurft ?

Würde man dann in der Breite nach den 1280 Pixeln den Hintergrund sehen ?

Wäre dem so, dann wäre das designtechnisch noch gerade so verschmerzbar. Mit einfarbigen Streifen links und rechts neben dem Hintergrundbild könnte ich leben.

Wie verhält sich die Sache aber bei der Höhe ? Würde der Inhalt ( der länger als 800 Pixel ist ) dann bei einer Full HD Auflösung nach unten hin über das Hintergrundbild hinausgehen ( was definitiv shyce aussehen würde ) ?

Oder sollte man gleich vorsichtshalber mit der Wiederholung des Hintergrundbildes in alle Richtungen arbeiten ( was an den Überschneidungen nicht gut aussieht, aber bei höheren Auflösungen womöglich wenigstens den Hintergrund "zumacht" ?

Für Ratschläge und Tipps wäre ich dankbar.

Grüße,

Tasnal

 

[pixelflat]

Wenn das Bild sowieso ein Muster ist, warum machst du´s dann nicht richtig und nimmst vom Bild nur den kleinsten Bereich und lässt es dann via CSS horizontal sowie vertikal wiederholen.

Dann ist dein Bild 1. wesentlich kleiner und 2. ist die Auflösung deiner Besucher egal.

Ich würde deine Seite zumindest ziemlich zügig verlassen, wenn jede Seite ein eigenes Fullscreen-Wallpaper als Hintergrund hat...

 

[Tasnal]

Wenn das Bild sowieso ein Muster ist, warum machst du´s dann nicht richtig und nimmst vom Bild nur den kleinsten Bereich und lässt es dann via CSS horizontal sowie vertikal wiederholen.

Weil es kein "richtiges" Muster ist, sondern ein verschwommenes Bild. Verhältnismäßig große Ausschnitte ( z.B. 1280x720 Pixel ) davon ergeben nach wie vor einen homogenen Hintergrund während ein kleiner ( z.B. 200x200 Pixel ) und zig-fach wiederholter Ausschnitt auch auf Grund der Schnittkanten nicht mehr stimmig aussieht.

Ich würde deine Seite zumindest ziemlich zügig verlassen, wenn jede Seite ein eigenes Fullscreen-Wallpaper als Hintergrund hat...

Halte ich so pauschal ausgedrückt für Quatsch. Selbst wenn das Bild 1920x1080 Pixel hat so ist es nicht größer als 150KB und somit in den meisten Fällen in Bruchteilen von Sekunden geladen. So schnell kannst Du die Seite gar nicht verlassen.

Trotzdem lädt ein 150KB Hintergrundbild immer noch langsamer als ein 75KB Hintergrundbild und damit habe ich dann einen weniger sauberen Seitenaufbau. Zumal ja neben dem Hintergrundbild noch die eine oder andere Sache zusätzlich geladen werden muss. Es geht hier eigentlich um reine Kosmetik: Alle Seiten sind innerhalb von 1 bis max. 3 Sekunden geladen. Ich hätte aber gerne einen möglichst gleichmäßigen bzw. nicht bis kaum merkbaren Seitenaufbau.

Im schlimmsten Fall sorge ich für eine Index-Seite die die einzelnen Hintergründe vorlädt ( das sind dann halt auf alle Seiten bezogen knapp 500KB an Daten ). Eventuell lässt sich das aber eben durch die Verkleinerung der Hintergründe in der Auflösung vermeiden.

Und darum geht´s ja in diesem Thread: Wie sich die Verkleinerung der Hintergründe auf die Darstellung auswirkt.

Grüße,

Tasnal

 

[pixelflat]

Das ist trotzdem schlechtes Design. Mach wenigstens den Hintergrund so, dass du ab einem gewissen Punkt an den Rändern eine fixe Farbe hast. Dann kannst du den Seitenhintergrund auf die Farbe setzen und keinem fällt mehr sofort auf, dass das Hintergrundbild zu klein ist.

Spätestens wenn jemand mit einem 27" (2560x1440) oder größer kommt, hast du ein Problem. Dann sieht die Seite nämlich lächerlich schlecht aus, wenn bei 1280 irgendwo das Bild aufhört.

Und dann darfste auch extra eine Mobile-Version machen, weil sich da erst recht keiner das halbe Mb laden will.

 

[Tasnal]

Das ist trotzdem schlechtes Design.

Generell geht es wie so oft um das Thema "Optimierung".

Die Seite ist mit ihren 1920x1080er Hintergründen aktuell so ausgelegt, dass jeder Besucher mit einer maximalen Bildschirmauflösung von 1920x1080 Pixeln eine verhältnismäßig optimale Ansicht erhält.

Besser wird das Ganze ( auf Grund des 800 Pixel breiten Layouts ) wenn man mit den klassischen ( und vermutlich aktuell noch am weitesten verbreiteten Auflösungen ) im 1280er ( bis 1440er ) Bereich surft.

Damit decke ich ( vermutlich ) den Großteil der potentiellen Interessenten schon mal ab und keiner davon muss sich über schlechtes Design beschweren.

Spätestens wenn jemand mit einem 27" (2560x1440) oder größer kommt, hast du ein Problem.

Ich muss zugeben, dass ich 2560x1440 Pixel Surfer jetzt nicht in meine Überlegungen zum Layout mit einbezogen habe. Auch wenn ich jegliche Form der Diskriminierung generell ablehne: In diesem Fall werde ich eine Ausnahme machen müssen. Ebenso die mobilen Surfer ( via Smartphone ) lasse ich außen vor. Es handelt sich um eine Seite, die Fotografien zeigt, die nicht für eine Betrachtung via Handydisplay gedacht sind. Und da sage ich mal so: Wer hier die Anzahl der gedownloadeten KBs im Hinterkopf hat gehört einfach nicht zur angesprochenen Zielgruppe.

Dann sieht die Seite nämlich lächerlich schlecht aus, wenn bei 1280 irgendwo das Bild aufhört.

Damit scheint meine Frage indirekt beantwortet zu sein, dass das Hintergrundbild tatsächlich bei höherer Auflösung einfach endet ( und z.B. nicht skaliert wird ) und der Hintergrund blank liegt.

Ob die Seite auf Grund der Seitenstreifen lächerlich schlecht aussieht sei jetzt mal dahingestellt. Dramatischer scheint mir zu sein, dass das Hintergrundbild dann rein theoretisch auch nach unten hin einfach aufhört und das eigentliche Design der Seite dann über den blanken Hintergrund hinausläuft - das wäre in der Tat nicht gut.

Mach wenigstens den Hintergrund so, dass du ab einem gewissen Punkt an den Rändern eine fixe Farbe hast. Dann kannst du den Seitenhintergrund auf die Farbe setzen und keinem fällt mehr sofort auf, dass das Hintergrundbild zu klein ist.

Entweder das oder beim 1920x1080er Hintergrundbild bleiben ( und damit die Bildschirmauflösungen geschätzter 95% aller Surfer sicher abdecken ):

You do not have permission to view link please Anmelden or Registrieren

Ma´ kuck´n ...

Grüße,

Tasnal

 

[pixelflat]

Gutes Design (damit meine ich nicht Pixel-Schupsen in PS) äußert sich dadurch, dass es mit jedem Browser und jeder Auflösung gleich aussieht. Ein Hintergrundbild mit fester Größe erlaubt das eben nicht (wirklich).

Eine Möglichkeit wäre noch, das Bild einfach immer auf 100% zu skalieren:

You do not have permission to view link please Anmelden or Registrieren

Je nach Bild sieht das irgendwann aber auch pixelig und entsprechend "billig" aus.

E: Du könntest natürlich auch mit JS die Auflösung bestimmen und je nach dem das passende Bild ausliefern (sprich, mehrfach abspeichern). Aber naja...

 

[Tasnal]

Schon mal herzlichen Dank für die nützlichen Tipps. Vor allem auch der Link hilft mir ein ganzes Stück weiter !