Diese Website verwendet Cookies. Warum wir Cookies einsetzen und wie Sie diese deaktivieren können, erfahren Sie unter Datenschutz.
Zum Hauptinhalt springen

Hintergrundbilder für den Seitenkopf

Im LINKEN CMS können Sie jeder einzelnen Seite Ihres Webauftritts ein individuelles Hintergrundbild zuordnen. Welche technischen Voraussetzungen die Bilder erfüllen müssen damit optimale Ergebnisse erreicht werden, erläutern wir Ihnen auf dieser Seite. Ganz Eilige springen direkt nach unten und können dort kurz und knapp zusammengefasst lesen, welche Bilder sich am besten eignen.

Anzeigebereich des Hintergrundbilds in Abhängigkeit vom Ausgabegerät

Durch das responsive Layout des LINKEN CMS, steht für das Hintergrundbild je nach Ausgabegerät ein anderer Anzeigebereich zur Verfügung. Es wird auf einem Smartphone also anders aussehen als auf dem großen Bildschirm eines Desktopcomputers. Hier sehen Sie drei Beispiele, um diese Unterschiede zu verdeutlichen. Alle Beispiele zeigen den Seitenkopf der gleichen Seite. Das erste ist die Darstellung auf einem Mobilgerät mit einer logischen Bildschirmbreite von 320px, das zweite die Darstellung auf einem Bildschirm mit einer logischen Breite von 768px und schließlich auf einem Bildschirm mit einer logischen Breite von 2560px. Auf dem großen Bildschirmen ist das Bild sehr breit, auf dem mittleren hat es etwa klassisches Kinoformat und auf dem kleinen eher ein quadratisches Format.

Anzeigebereich des Hintergrundbilds in Abhängigkeit von der Anzahl der Navigationspunkte

Das HG-Bild auf 320px breitem Bildschirm bei wenig Navigationspunkten

Die größe des Ausgabebildschirms ist nicht der einzige Faktor, der Einfluss auf den für ein Hintergrundbild zur Verfügung stehenden Anzeigebereich hat. Gerade auf kleinen Bildschirmen, wird dieser Anzeigebereich stark von der Anzahl der Navigationspunkte beeinflusst. Weniger Navigationspunkte bedeuten automatisch auch weniger Platzbedarf in der Höhe. Das Hintergrundbild wird deshalb bei wenigen Navigationspunkten auch auf einem kleinen Bildschirm im Querformat angezeigt.

Beschneidung des Hintergrundbilds

Hier sehen Sie, dass durch den Browser immer das komplette Hintergrundbild geladen wird. Je nach Ausgabegerät wird es jedoch unterschiedlich beschnitten. Das ist notwendig, damit der für das Hintergrundbild zur Verfügung stehende Anzeigebereich jeweils vollständig ausgefüllt werden kann. Die Alternative zur Beschneidung wäre, das Bild zu strecken oder zu stauchen. Weil es dadurch verzerrt würde, wäre das allerdings keine gute Idee.

Das Hintergrundbild in unserem Beispiel, liegt im Seitenverhältnis 4:3 vor. Ist der verfügbare Anzeigebereich für das Hintergrundbild quadratisch, rücken rechts und links jeweils kleine Teile des Bildes aus dem sichtbaren Bereich. Ist der Anzeigebereich breit, rutschen Teile des Bildes oben und unten aus dem Anzeigebereich.

Es lässt sich gut erkennen, warum dieses Hintergrundbild auf allen Ausgabegeräten gut „funktioniert“:

  • Es gibt keine wichtigen Bildinhalte, die bei Beschnitt in der Horizontalen oder Vertikalen verloren gehen.
  • Der Bereich im Foto auf den die Betrachter*in fokussiert, befindet sich mit dem Übergang von Hügel zu Himmel vertikal genau in der Bildmitte. Er gerät also auch bei vertikalem Beschnitt auf einem sehr breiten Bildschirm nicht aus dem Fokus.

Dateiformat

Verwenden Sie als Hintergrundbild ein Bild direkt von Ihrer Kamera, ohne es nachträglich zu bearbeiten, liegt es in den meisten Fällen im Format JPEG/JPG vor. Das ist genau das richtige Format für fotografische Inhalte. Erzeugen Sie selbst Hintergrundbilder z.B. eine Collage aus verschiedenen fotografischen Inhalten, sollten Sie sie ebenfalls im JPEG-Format speichern. Achten Sie dabei darauf, die Kompression niedrig zu wählen. Viele Programme bieten z.B. die Optionen Qualität: hoch oder maximal an, was gleichbedeutend mit geringer Kompression der Bilder ist. Entscheiden Sie sich für eine dieser beiden Möglichkeiten. Das LINKE CMS wird das von Ihnen hochgeladenene Bild für unterschiedliche Bildschirmauflösungen konvertieren und erneut per JPEG komprimieren. Weil JPEG verlustbehaftet komprimiert, also Informationen vernichtet, sollte die Qualität des Ausgangsmaterials aufgrund dieser Skalierung und erneuten Komprimierung möglichst hoch sein.

Wenn die Qualität des Ausgangsmaterials wichtig ist fragen Sie sich jetzt vielleicht, warum man nicht ein Dateiformat verwenden sollte, bei dem gar nicht oder verlustlos komprimiert wird, also z.B. BMP oder PNG? Grundsätzlich geht auch das, ist für fotografische Inhalte jedoch aus zwei Gründen nicht zu empfehlen. Erstens sind die Qualitätsgewinne gegenüber gering komprimierten JPEG-Dateien minimal, während die Dateigröße unverhältnismäßig ansteigt: unser 4592x3448 Pixel großes Beispielbild hat als JPEG mit hoher Qualität gespeichert z.B. eine Dateigröße von knapp 4,7MB, während die Dateigröße als 24-Bit-PNG schon auf 22,2MB anwächst. Die Spitze wird bei Speicherung ohne Kompression z.B. im Format BMP mit 45,3MB erreicht. Zweitens speichert das LINKE CMS nicht oder verlustlos komprimierte Bilder nach Skalierung ebenfalls in einem verlustlos komprimierenden Dateiformat, nämlich PNG. Das sorgt natürlich für die beste Qualität, aber bei fotografischen Inhalten eben auch für – verglichen mit JPEG – sehr große Dateien. Je größer die Datei, desto länger warten die Besucher*innen Ihrer Seite auf die Anzeige des Hintergrundbilds. Surfen Ihre Besucher*innen mit einem sehr schnellen Anschluss spielt das eine untergeordnete Rolle. Alle Nutzer*innen mit geringerer Bandbreite, z.B. Nutzer*innen von Mobilgeräten mit denen man je nach Region oft nicht über 3G hinaus kommt, warten bei zu großen Dateien aber u.U. viel zu lange.

Last but not least: sollte man PNG überhaupt verwenden, wenn es so große Dateien erzeugt? Auf jeden Fall, aber nur bei den „richtigen“ Bildinhalten! Für Fotos verwenden Sie bitte immer JPEG. Für Logos ist PNG aufgrund seiner Eigenheiten dagegen i.d.R. sehr gut geeignet und erzeugt bei wesentlich höherer Qualität deutlich kleinere Dateien als das für Logos vollkommen ungeeignete JPEG-Format.

Welche Bilder sich am besten eignen

Seitenverhältnis

Wie Sie sehen kann man nicht genau sagen, welches Seitenverhältnis der Anzeigebereich für ein Hintergrundbild am Ende haben wird. Man kann jedoch zumindest ein wenig generalisieren: je kleiner der Bildschirm, desto mehr nähert sich der Anzeigebereich einem Seitenverhältnis das im Bereich von 3:2, 4:3 oder in manchen Fällen sogar 1:1 liegt. Wahrscheinlich wird Ihre Seite am Ende von mehr Nutzer*innen mit verhältnismäßig kleinen Bildschirmen von Smartphones, Tablets und Laptops betrachtet, als von solchen mit einem WQHD- oder 5k-Bildschirm.

Am besten eignen sich deshalb Bilder in einem Seitenverhältnis von 4:3 oder 3:2, mit minimalen Abstrichen aber auch 16:9. Die meisten Fotoapparate oder Smartphones beherrschen diese Formate von Hause aus oder können auf Wunsch Fotos in einem dieser Seitenverhältnisse aufnehmen. iPhones und iPads fotografieren im Seitenverhältnis 4:3, Kameras mit einem Micro Four Thirds Sensor ebenfalls in 4:3, Kameras mit einem APS-C- oder Vollformatsensor in 3:2.

Auflösung

Ganz einfach: nehmen Sie immer die höchste Auflösung, die Ihnen zur Verfügung steht. Hat Ihr Original z.B. ein Breite von 5000px oder mehr, laden Sie es genau so hoch. Das LINKE CMS kümmert sich im Hintergrund darum, für unterschiedliche Anzeigeräte jeweils passende Versionen zu skalieren. Auch auf Geräte mit doppelter Pixeldichte wird dabei Rücksicht genommen: die meisten Smartphones und immer mehr Tablets und Laptops werden heute mit doppelter oder sogar dreifacher Pixeldichte angeboten. Ein iPhone5 hat z.B. eine logische Bildschirmbreite von 320px. Jedes logische Pixel setzt sich dabei jedoch aus vier physischen Pixeln zusammen. De facto stehen in der Breite 640px zur Verfügung. Für solche Geräte liefert das LINKE CMS deshalb auch Hintergrundbilder mit entsprechend höherer Auflösung aus.

Dateiformat

Verwenden Sie für Ihre Hintergrundbilder immer das JPEG-Format. Gibt Ihre Kamera die Dateien bereits als JPEG aus, müssen Sie nichts weiter tun. Bearbeiten Sie die Bilder nach, wählen Sie beim Speichern der Bilder bitte die Option Qualität: hoch oder Qualität: maximal.

Vorsicht bei Text und Portraits

Sehen Sie unbedingt davon ab, Hintergrundbilder mit Textinformationen zu verwenden! Durch den unvermeidbaren Beschnitt der Bilder, würden Ihre Inhalte sonst u.U. sinnentstellt.

Portraits sind aus dem gleichen Grund mit Vorsicht zu genießen. Verwenden Sie Hintergrundbilder, auf denen Personen sichtbar sind und unbedingt sichtbar sein sollen, testen Sie die Seiten auf jeden Fall mit unterschiedlichen Bildschirmbreiten um verschiedene Endgeräte zu simulieren. Wenn Köpfe von Personen dabei z.B. ungünstig abgeschnitten oder überdeckt werden, sollten Sie das Bild nicht verwenden.