Bildgrößen

Regeln für die Anzeige von Bildern

Das Designsystem von Berlin.de sieht feste Seitenverhältnisse (Ratio) bei der Anzeige von Bildern vor. Deshalb ist es unerlässlich, alle verwendeten Bilder anhand ihrer Ratio zu prüfen und gegebenenfalls anzupassen. Nur wenn alle Bilder im passenden Seitenverhältnis sind, kann davon ausgegangen werden, dass die Seite sich in allen Bildschirmgrößen und Variationen korrekt verhält.

Die Seitenverhältnisse (Breite:Höhe), die am häufigsten auf den Seiten angezeigt werden, sind 4:3, 3:4 und 2:1. Ausnahmen davon können spezielle Seitentypen oder Flex-Module sein.

Passende Bilder hochladen

Das Seitenverhältnis ist daher die beste Größe zur Orientierung beim Upload von Bildern in Imperia. Wir empfehlen, die Bilder gleich im zum Einsatz passenden Seitenverhältnis hochzuladen. Das verlustfreie Skalieren von größeren Bildern funktioniert nur bei einem passenden Seitenverhältnis. In der nachfolgenden Auflistung finden Sie zudem Größen in Pixeln. Dies ist nur die Angabe, wie groß das Bild minimal sein darf. Bitte schneiden Sie nicht das Bild auf diese Maße zu oder laden ein Bild hoch, das diese Mindestmaße unterschreitet. Wir empfehlen, eine Mindestbreite von 1500 Pixeln (Querformat) hochzuladen, um das Bild unabhängig vom Einsatz auf allen Endgeräten verlustfrei darzustellen.

Sortiert nach Seitenverhältnis

Seitenverhältnis 1:1

  • Logo-Galerie
  • SimpleSearch: Bilder in der Tabellenspalte

Seitenverhältnis 2:1

  • Bild im Reiter “Inhalt” groß
  • Startseite: Kachel-Opener
  • SimpleSearch Einleitungsbild

Seitenverhältnis 4:3

  • Bild im Reiter “Inhalt” (Teaser)
  • FAQ-Multi
  • Karte
  • RSS-Feed
  • SimpleSearch Einleitungsbild
  • SimpleSearch Teaser (Bilder in der Tabellenspalte)
  • Teaser-Multi
  • Teaser Marketing (Variante Imageteaser – nur möglich in den Verticals Marketing und Shop)
  • Testimonial
  • Text/Bild
  • Text/Bild Multi

Seitenverhältnis 3:4

  • FAQ-Multi
  • Lebenslauf
  • RSS-Feed
  • Text/Bild
  • Text/Bild Multi

Seitenverhältnis 3:1

  • Startseite: Opener (Verticals Identität, Marketing und Shop)

Seitenverhältnis 4:5

  • Teaser Poster (Vertical Marketing)

Seitenverhältnis variabel

  • Bebauungsplan
  • Galerie
  • Metanavigation: Logo Footer und Header
  • SimpleSearch: Bilder in der Tabellenspalte
  • Text/Bild
  • Video / Audio: Vorschaubild nur Video

Sortiert nach Flex-Modul

FAQ-Multi

  • Seitenverhältnis 4:3 bzw. 3:4
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px (640px bei Hochformat)

Galerie

  • Seitenverhältnis variabel im 2:1 Container
  • maximale Bildbreite 980px
  • maximale Bildhöhe 735px

Das Bild wird in einem 2:1-Rahmen angezeigt, aber nicht auf diese Maße skaliert. Das Seitenverhältnis des Ausgangsbildes bleibt erhalten. Das Bild erhält bei Bedarf einen dunkelgrauen Rahmen, wenn es kleiner als der Rahmen ist oder das Seitenverhältnis nicht passt.

Karte

Es können Bilder für die händischen Marker gepflegt werden.

Bild in der Karten-Bubble

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 80px
  • Minimale Bildhöhe 60px

Bild in der Teaser-Darstellung unter der Karte

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Logo-Galerie (Reiter Footer)

  • Seitenverhältnis 1:1
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 480px

RSS-Feed

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Teaser Marketing (als Imageteaser – nur für Verticals Marketing und Shop)

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Teaser-Multi

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Teaser Poster

  • Seitenverhältnis 4:5
  • Minimale Bildbreite 460px
  • Minimale Bildhöhe: 575px

Testimonial – Kurzzitat

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 980px
  • Minimale Bildhöhe 490px

Text/Bild

Seitenverhältnis 4:3 bzw. 3:4

  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px (640px bei Hochformat)
  • Die Bildeinstellung “Halbe Breite” hat ein Seitenverhältnis von 4:3

Seitenverhältnis variabel

  • Bildvergrößerung und Darstellung “Maximale Breite”
  • Minimale Bildbreite variabel
  • Minimale Bildhöhe variabel

Text/Bild-Multi

  • Seitenverhältnis 4:3 bzw. 3:4
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px (640px bei Hochformat)

Video / Audio – Vorschaubild nur Video

  • Seitenverhältnis variabel
  • Bildbreite redaktionell pflegbar, empfohlen 980px
  • Bildhöhe redaktionell pflegbar, empfohlen leer lassen

Sortiert nach Template

Es werden nur Templates aufgeführt, die neben den Reitern Flex-Module und/oder Inhalt spezielle Bereiche zur Pflege und Anzeige von Bildern haben.

Bebauungsplan

  • Seitenverhältnis variabel
  • Minimale Bildbreite 980px bzw. 480px (Hochformat)
  • Minimale Bildhöhe variabel

Lebenslauf

  • Seitenverhältnis 3:4
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 640px

SimpleSearch

Einleitungsbild

  • Einleitungsbild rechts: Seitenverhältnis 4:3
  • Einleitungsbild darunter: Seitenverhältnis 2:1
  • Minimale Bildbreite 480px (darunter 980px)
  • Minimale Bildhöhe 360px (darunter 490px)

Bilder in der Tabellenspalte

  • Seitenverhältnisse variabel, 4:3 bzw. 3:4 oder 1:1
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 480px (640px bei Hochformat)

Bild unskaliert (bei Publikationsdatenbank autoscale)

  • Seitenverhältnis variabel
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Das Bild wird in diesem Rahmen angezeigt, aber nicht auf diese Maße skaliert. Das Seitenverhältnis des Bildes bleibt erhalten.

Startseite

Opener (Startseite der Verticals Identität, Marketing und Shop)

  • Seitenverhältnis 3:1
  • Minimale Bildbreite 1500px
  • Minimale Bildhöhe 500px

Kachel-Opener

  • Seitenverhältnis 2:1
  • Minimale Bildbreite 620px
  • Minimale Bildhöhe 310px

Sortiert nach Seitenbereich

Reiter “Inhalt”

Bild groß

  • Seitenverhältnis 2:1
  • Minimale Bildbreite 980px
  • Minimale Bildhöhe 490px

Bild (Teaser)

  • Seitenverhältnis 4:3
  • Minimale Bildbreite 480px
  • Minimale Bildhöhe 360px

Metanavigation

Logo Footer

  • Minimale Bildbreite 180px
  • Minimale Bildhöhe 40px
  • Markenkonforme Logos mit dem Dateinamen: B_[SEN bzw. BA]_[Behördenname]_Logo_DE_H_P_1C.svg

Logo Header

  • Bildbreite flexibel, max. 240px
  • Minimale Bildhöhe 56px, Bilder, die höher oder niedriger sind, werden auf 56px skaliert.