AAM Editor – Hintergrundbilder verwalten

Im Hintergrund-Tab werden Bilder hochgeladen und verwaltet, die als Hintergründe, Produktbilder oder grafische Inhalte innerhalb der Website verwendet werden.

Zur Übersicht: AAM Editor Hosting

Hintergrund-Tab

Der Hintergrund-Tab verwaltet den zentralen Bilderbestand des Projekts. Hochgeladene Bilder können anschließend in verschiedenen Sektionen ausgewählt und mehrfach verwendet werden.

Typische Einsatzbereiche sind:

Hero-Hintergründe
Sektionshintergründe
Produktbilder und Buchcover
Kartenhintergründe
Galerien und Fotoalben
Open-Graph-Vorschaubilder

Bilder hochladen

Den Hintergrund-Tab öffnen.
Auf + Hochladen klicken.
Eine oder mehrere Bilddateien auswählen.
Den Upload vollständig abwarten.
Die hochgeladenen Bilder erscheinen anschließend im Bilderbestand.

Mehrere Dateien können gemeinsam ausgewählt und nacheinander hochgeladen werden.

Unterstützte Bildformate

Geeignete Formate sind:

JPG und JPEG
PNG
WebP
GIF

Je nach Sektion oder Browser können zusätzlich SVG-Dateien unterstützt werden. Für normale Fotos und Hintergründe sind JPG oder WebP meist am besten geeignet.

Bilder in Sektionen verwenden

Die gewünschte Seite öffnen.
Die betreffende Sektion auswählen.
Das Feld für Bild oder Hintergrundbild öffnen.
Auf Bild auswählen klicken.
Das gewünschte Bild aus dem Bilderbestand auswählen.
Darstellung und Zuschnitt in der Vorschau kontrollieren.

Dasselbe Bild kann auf mehreren Seiten und in mehreren Sektionen verwendet werden.

Hero-Hintergrund festlegen

Die Hero-Sektion auswählen.
Das Feld für das Hintergrundbild öffnen.
Ein Bild aus dem Hintergrund-Tab auswählen oder neu hochladen.
Position, Abdunklung und Textlesbarkeit prüfen.

Das Hero-Bild kann vom SEO-Bereich automatisch als Open-Graph-Vorschaubild vorgeschlagen werden.

Kartenhintergründe

Im Karten-Grid kann jede Karte ein eigenes Hintergrundbild besitzen.

Zusätzlich können eingestellt werden:

Hintergrundfarbe
Bilddatei
Abdunklung des Bildes
Textfarbe
Position und Zuschnitt

Weitere Informationen enthält Kartenhintergründe gestalten.

Bilder ersetzen

Soll ein Bild in einer Sektion ausgetauscht werden:

Die betreffende Sektion auswählen.
Das vorhandene Bildfeld öffnen.
Ein anderes Bild aus dem Bestand auswählen oder neu hochladen.
Die Darstellung in der Vorschau prüfen.
Projekt speichern und exportieren.

Das bisherige Bild bleibt im Bilderbestand erhalten, solange es nicht separat gelöscht wird.

Bilder löschen

Im Hintergrund-Tab das gewünschte Bild suchen.
Das Löschsymbol anklicken.
Die Sicherheitsabfrage bestätigen.

Vor dem Löschen muss geprüft werden, ob das Bild noch auf einer Seite verwendet wird.

Wird eine weiterhin eingebundene Datei entfernt, können auf der veröffentlichten Website fehlerhafte oder leere Bildbereiche entstehen.

Sichere Reihenfolge beim Löschen

Alle Sektionen prüfen, die das Bild verwenden.
Das Bild dort ersetzen oder entfernen.
Projekt speichern.
Die Website kontrollieren.
Erst danach die Bilddatei aus dem Bestand löschen.

Nicht mehr verwendete Dateien können zusätzlich über Server aufräumen und Papierkorb ermittelt werden.

Bildgröße und Auflösung

Für großflächige Hintergründe empfiehlt sich eine ausreichende Auflösung.

Als Richtwert:

Hero- und Seitenhintergründe: mindestens etwa 1920 × 1080 Pixel
Karten und Produktbilder: mindestens etwa 1200 × 800 Pixel
Buchcover und Hochformate: passende Hochformat-Auflösung
kleine Vorschaubilder: abhängig von der tatsächlichen Darstellung

Sehr große Originaldateien sollten vor dem Upload optimiert werden.

Dateigröße

Bilder mit mehreren Megabyte können den Upload und die Ladezeit der Website unnötig verlangsamen.

Empfehlungen:

Fotos als JPG oder WebP speichern.
PNG hauptsächlich für Transparenz oder Grafiken verwenden.
Unnötig hohe Auflösungen reduzieren.
Bilddateien möglichst unter etwa 1 MB halten.
Große Bilder vor dem Upload komprimieren.

Die zulässige maximale Dateigröße hängt von der Serverkonfiguration ab.

Automatische Optimierung

Der Editor kann hochgeladene Bilder automatisch für die Webdarstellung aufbereiten.

Abhängig von der Installation können dabei:

Bilder komprimiert
WebP- oder JPG-Versionen erzeugt
unterschiedliche Größen erstellt
Dateien für mobile Geräte optimiert

werden.

Trotz automatischer Optimierung sollten keine unnötig großen Ausgangsdateien hochgeladen werden.

Bildausschnitt und Seitenverhältnis

Ein Hintergrundbild wird häufig so skaliert, dass es den vollständigen Bereich ausfüllt. Dabei können Teile des Bildes abgeschnitten werden.

Bei der Bildauswahl sollte deshalb geprüft werden:

ob das Hauptmotiv mittig oder passend positioniert ist
ob wichtige Bildbereiche auf Mobilgeräten sichtbar bleiben
ob Text über dem Bild lesbar ist
ob Hoch- und Querformat sinnvoll eingesetzt werden

Für wichtige Motive kann eine alternative Bilddatei mit angepasstem Ausschnitt sinnvoll sein.

Text über Hintergrundbildern

Text muss auch auf detailreichen oder hellen Bildern lesbar bleiben.

Mögliche Maßnahmen:

Bild abdunkeln
Textfarbe anpassen
ruhigere Bildbereiche verwenden
Textschatten oder Hintergrundfläche einsetzen
Bild mit weniger Details auswählen

Die Darstellung sollte auf Desktop- und Mobilansicht geprüft werden.

Hintergrund-Tab und Medien-Tab

Der Hintergrund-Tab dient hauptsächlich der komfortablen Bildauswahl innerhalb visueller Sektionen.

Der Medien-Tab ist dagegen der allgemeine Dateimanager für:

Bilder
PDF-Dateien
Archive
Downloads
Dokumente
weitere Dateitypen

Bilder für wiederverwendbare Sektionen können je nach Arbeitsweise in beiden Bereichen verfügbar sein.

Empfehlungen

Bilder vor dem Upload sinnvoll benennen.
Einheitliche Formate und Seitenverhältnisse verwenden.
Sehr große Dateien vorab komprimieren.
Wichtige Motive nicht direkt am Bildrand platzieren.
Textlesbarkeit über Hintergrundbildern prüfen.
Darstellung auch auf schmalen Bildschirmen kontrollieren.
Bilder erst löschen, wenn keine Sektion mehr darauf verweist.
Nicht mehr benötigte Dateien regelmäßig über die Serverbereinigung entfernen.

Weiterführende Seiten