Hintergrundbilder im Seitenkopf
Im LINKEN CMS können Sie entweder ein einziges Bild für alle Unterseiten festlegen, oder jeder einzelnen Seite Ihres Webauftritts ein individuelles Hintergrundbild zuordnen. Welche technischen Voraussetzungen die Bilder erfüllen müssen, erläutern wir Ihnen auf dieser Seite. Eine kompakte Zusammenfassung finden Sie am Ende der Seite.
Anzeigebereich des Hintergrundbilds in Abhängigkeit vom Ausgabegerät
Das LINKE CMS ist responsiv. Das bedeutet: Je nach Ausgabegerät wird das Kopfbild in einem anderen Ausschnitt angezeigt. 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
Der Bildausschnitt wird nicht nur von der Bildschirmgröße bestimmt, sondern auch von Ihrer individuellen Website. Haben Sie nur wenige Navigationspunkte auf der ersten und zweiten Ebene, bedeutet das 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
Durch den Browser wird immer das komplette Hintergrundbild geladen. Je nach Ausgabegerät wird es jedoch unterschiedlich beschnitten. So wird der zur Verfügung stehende Anzeigebereich immer vollständig ausgefüllt, ohne dass das Bild verzerrt wird..
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, liegt es in den meisten Fällen im Format JPEG/JPG vor. Wenn Sie Bilder bearbeiten oder selbst erstellen, 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 - das ist für Ihre Website optimal. Das LINKE CMS wird das von Ihnen hochgeladenene Bild für unterschiedliche Bildschirmauflösungen automatisch anpassen.
Dateiformate wie BMP oder PNG sind aus unterschiedlichen Gründen weniger gut geeignet. 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 (hohe Qualität) eine Dateigröße von knapp 4,7MB, während die Dateigröße als 24-Bit-PNG schon auf 22,2MB anwächst. Je größer die Datei, desto länger warten die Besucher*innen Ihrer Seite auf die Anzeige des Hintergrundbilds. Für Nutzer*innen mit geringerer Bandbreite, schlechtem Mobilnetz o.ä. bedeutet das eine massive Einschränkung.
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
Am besten eignen sich Bilder in einem Seitenverhältnis von 4:3 oder 3:2, notfalls 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.
Auflösung
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.
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 eingefügten Texten zu verwenden! Durch den Beschnitt der Bilder können z.B. Teile des Textes wegfallen und der Text so sinnentstellt werden.
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.