Bilder und Grafiken

Häufig gestellte Fragen zu Bildern

Bilder und Grafiken

Beitragsbilder sind unscharf trotz ausreichender Auflösung

Hierbei handelt es sich um einen Fehler im Theme, bei dem WordPress die Bilder in Vorschaugröße ausliefert. Der Fehler ist dem Projektteam bereits bekannt, der Fix dazu wird in Kürze verfügbar sein. Sie brauchen Ihre Bilder in der Zwischenzeit nicht neu in die Mediathek laden.

Bilder im Inhaltsbereich werden zu groß dargestellt

Das kann passieren, wenn Bilder über die Funktion „Inline-Bild“ eingepflegt werden. Fügen Sie das Bild per „Bild“-Block erneut ein.

Sie können zudem mit dem „Spalten“ oder „Media & Text“ Block arbeiten, um Bilder im Inhaltsbereich zu skalieren.

Bilder in Tabellen werden zu groß dargestellt.

Dies entsteht durch einen Fehler bei variablen Spaltenbreiten der Tabelle. Gehen Sie folgendermaßen vor, um dies zu beheben:

  1. Navigieren Sie zur Bearbeitungsmaske der Seite, auf welcher der Fehler auftritt.
  2. Markieren Sie den Tabellenblock. In der rechten Seitenleiste sehen Sie nun die Block-Einstellungen.
  3. Aktivieren Sie die Einstellung „Tabellenzeilen mit fester Breite“
Kann man die Beitragsbilder ausblenden oder die Größe ändern?

Wenn Sie auf einer Inhaltsseite über die Seiteneinstellungen ein Beitragsbild festgelegt haben, wird dieses nicht nur als Vorschaubild für das Teaser Grid und das Portalmenü verwendet, sondern auch als Headerbild auf der jeweiligen Seite. Es ist nicht möglich, das Bild auf der Inhaltsseite selbst auszublenden oder die Größe anzupassen.

Können im Teaser Grid oder Portalmenü Bilder unabhängig vom „Beitragsbild“ eingestellt werden?

Das Teaser Grid und Portalmenü ziehen sich die Vorschaubilder aus dem „Beitragsbild“ (Editor > Seiteneinstellungen > Beitragsbild festlegen). Damit sind sie gleichzeitig als Headerbild auf der jeweiligen Inhaltsseite gesetzt. Es ist nicht möglich, ein individuelles Bild für die Darstellung im Portalmenü oder Teasergrid festzulegen.

Meine Bilder haben graue Balken oder einen grauen Schleier

Bitte beachten Sie die Hinweise zu Bildern und Grafiken im neuen Theme. Bilder im Inhaltsbereich, die dem Seitenverhältnis 3:2 nicht entsprechen, erhalten einen grauen Hintergrund, um dieses Format auszufüllen.

Wenn Sie weiße oder transparente Bilder hochladen und im Inhaltsbereich verwenden, erhalten diese ein Overlay. Sie können dies über die Bild-Blockeinstellungen unter Additional Settings | Add Overlay deaktivieren.

Meine Bilder sind verschwommen.

Bitte stellen Sie Bilder in einer ausreichenden Auflösung und passendem Seitenformat 3:2 bereit. Stellen Sie in den Bildeinstellungen die Auflösung auf Vollständige Größe.

Wo trage ich den Bildnachweis / Copyright / Urheberrechtsinfo ein?
  1. Öffnen Sie das gewünschte Bild in der Mediathek oder laden Sie ein neues Bild in die Mediathek.
  2. Hinterlegen Sie die Info im Feld „Beschreibung“.
  3. Anschließend wird der Bildnachweis im sekundären Footer (dunkelblauer Footer) angezeigt.
  4. Per Klick auf den Bildnachweis öffnet sich das dazugehörige Bild.
  5. Alternativ können Sie bei Bildern im Inhaltsbereich auch das Feld „Copyright Info“ unter Additional Settings in den Block-Einstellungen nutzen.
  • Bildnachweise zu Fotos in Portalmenüs werden auf der jeweiligen Seite angezeigt, nicht auf der Seite, auf welcher das Portalmenü eingebunden ist.

Auf dieser Seite finden Sie Informationen zu Seitenverhältnissen und Besonderheiten von Bildern und Grafiken. Für den neuen Webauftritt der FAU werden die Bilder hauptsächlich in den Seitenverhältnissen 3:2 (<1094 x 729 px) oder 16:9 (<1920 x 1080 px) abgebildet. Die Auflösung der Bilder sollte zwischen 72 bis 150 dpi liegen und die Dateigröße von 350 kb nicht überschreiten.

Zulässige Dateiformate

.jpeg, .webp, .png, .svg

Speichern Sie Fotos grundsätzlich im JPEG- oder WebP-Format.

WebP ist ein modernes Bildformat, das kleinere Dateigrößen bei hoher Qualität ermöglicht. Es unterstützt Transparenz und Animationen und sorgt für schnellere Ladezeiten ohne sichtbare Qualitätsverluste.

Infografiken und ähnliche Grafiken speichern Sie im PNG-Format, Logos möglichst im SVG-Format.

Seitenverhältnisse für Bilder und Header

Header/Hero für Fakultäten, Departments, Lehrstühle, Institute und Kooperationen

  • Seitenverhältnis 16:9
  • Für das Format 1:1 in Mobile und Desktop wird automatisch ein Ausschnitt des Bildes ausgegeben. Der Fokuspunkt für den gewünschten Bildausschnitt wird in WordPress manuell festgelegt.

Header Inhaltsseiten

  • Seitenverhältnis 16:9
  • Im Desktop wird automatisch ein Ausschnitt dieses Bildes im Format 2,35:1 ausgegeben.

Header Beiträge

  • Seitenverhältnis 3:2 für alle Endgeräte

Bilder

  • Seitenverhältnis 3:2
  • Für eine optimale und ansprechende Darstellung sollen alle Bilder in diesem Format angelegt werden.
  • Bisher angelegte Bilder, die diesem Format nicht entsprechen, werden mit einem grauen Hintergrund ausgefüllt und können weiterhin verwendet werden.
  • Inhaltsbilder können auch im Hochformat ausgegeben werden, mit einer maximalen Breite von 355 px.

Galerien

  • Seitenverhältnis 3:2
  • Bei Bildern, die dem Format nicht entsprechen, wird ein neutraler grauer Hintergrund hinzugefügt.

Teaser Grid

  • Seitenverhältnis 3:2 bei allen Endgeräten
  • Die Bilder werden automatisch aus dem hinterlegten Headerbild des jeweiligen Beitrags gezogen.

Portalmenü

  • Seitenverhältnis 3:2 auf einer Inhaltsseite
  • Die Bilder werden automatisch aus dem hinterlegten Headerbild des jeweiligen Beitrags gezogen.

Listen

  • Seitenverhältnis 16:9 auf allen Endgeräten
  • Die Bilder werden automatisch aus dem hinterlegten Headerbild des jeweiligen Beitrags gezogen.

Kontakte und Zitate

  • Mobil: Seitenverhältnis 4:3
  • Desktop und Tablet: Seitenverhältnis 1:1

Handlungsaufforderung (CTA)

  • Mobil: Seitenverhältnis 4:3
  • Desktop und Tablet: Seitenverhältnis 1:1

Tipps für bessere Bilder

  1. Stellen Sie sicher, dass Ihnen Bilder in einem bereits ausreichend großen Format und geeigneter Auflösung bereitgestellt werden!
  2. Wenn Sie nach geeignetem Bildmaterial für Ihre Website suchen, schauen Sie sich doch einmal auf Picdrop um.
  3. Sie können die Bilder anschließend in einem Bildbearbeitungsprogramm, wie zum Beispiel GIMP, oder direkt in der Mediathek über den Button „Bild bearbeiten“, herunterskalieren.
  4. Skalieren Sie kleine Bilder nicht hoch, es kommt sonst zu Qualitätsverlust.