Bildgrößen: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
Zeile 188: Zeile 188:
* maximale Bildhöhe 735px (ehem. 125px - klein; max. 800px - Vergrößerung)
* maximale Bildhöhe 735px (ehem. 125px - klein; max. 800px - Vergrößerung)


Das Bild wird in diesem Rahmen angezeigt, aber nicht auf diese Maße hoch skaliert. Das Seitenverhältnis des Bildes bleibt erhalten.
Das Bild wird in diesem Rahmen angezeigt, aber nicht auf diese Maße hoch 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.


=== Imagemap ===
=== Imagemap ===

Version vom 27. September 2021, 07:12 Uhr

Link zur Downloadseite des Redaktionshandbuchs für Imperia

Mit dem neuen Design-System ändern sich im Grundlayout die angezeigten Containergrößen von Bildern, sie werden nun größer angezeigt. Zudem wurden Seitenverhältnisse der Bilder harmonisiert. Dies bedeutet, dass in Seitentypen und Flexmodulen eingesetzte Bildvarianten, die kleiner als die neuen Containergrößen sind, im neuen Layout fehlerhaft angezeigt werden (verpixelt, unscharf etc.). Veränderte Seitenverhältnisse können dazu führen, dass sich die gezeigten Bildausschnitte ändern, auch wenn die bisher genutzte Bildvariante auf die neuen Containergrößen reagieren kann.

Wie auch schon vorher ist das Seitenverhältnis die beste Größe zur Orientierung beim Upload von Bildern. 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. 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 (wie Themen-Übersichtsseite) oder Flexmodule (wie Bildergalerie) bilden. Diese sind in der folgenden Auflistung ebenfalls aufgeführt.

Die angegebene Größe in Pixeln ist nur die Angabe, wie groß das Bild minimal sein darf. Bitte schneiden Sie nicht das Bild auf diese Maße zu, sondern orientieren Sie sich am Seitenverhältnis bei Auswahl und Einsatz der Bilder.

Übersicht geänderter Bildgrößen

Änderung der absoluten Größe (Seitenverhältnis bleibt gleich)

Änderung beim Seitenverhältnis und bei der absoluten Größe

  • Galerie
  • Lebenslauf (Seitentyp)
  • SimpleSearch Einleitungsbild (Seitentyp) - Text unter dem Bild ohne Sidebar
  • Logogalerie (Footer)
  • Themen-Übersichtsseite (Seitentyp) - Auto-Teaser halbe Breite Querformat, Auto-Teaser volle Breite Querformat, Auto-Teaser volle Breite Quadratisch, Bild im Reiter Inhalt, RSS Liste halbe Breite Querformat, RSS Liste volle Breite Querformat, RSS Liste volle Breite Quadratisch, Teaser Einspaltig volle Breite Querformat, Teaser Einspaltig volle Breite Hochformat, Teaser: halbe Breite Querformat und Zweispaltig Querformat, Text/Bild Einspaltig volle Breite Querformat, Text/Bild Einspaltig volle Breite Hochformat, Text/Bild: halbe Breite Querformat und Zweispaltig Querformat

keine Änderung

Flexmodul entfällt

  • Bild 300px (Startseite) entfällt
  • Text/Bild mehrspaltig (Startseite) entfällt

neue Flexmodule nach Layoutumstellung

Sortiert nach Seitenverhältnis ohne Größe in Pixel

1:1

  • Auto-Teaser halbe Breite Quadratisch (Themen-Übersichtsseite)
  • Auto-Teaser volle Breite Quadratisch (Themen-Übersichtsseite)
  • Logogalerie (Footer)
  • RSS Liste halbe Breite Quadratisch (Themen-Übersichtsseite)
  • RSS Liste volle Breite Quadratisch (Themen-Übersichtsseite)
  • SimpleSearch 40 x 40 Quadrat (SimpleSearch Bilder in der Tabellenspalte)
  • SimpleSearch 80 x 80 Quadrat (SimpleSearch Bilder in der Tabellenspalte)
  • Teaser Einspaltig volle Breite Hochformat (Themen-Übersichtsseite)
  • Teaser: Einspaltig halbe Breite Quadratisch und Zweispaltig Quadratisch (Themen-Übersichtsseite)
  • Teaser: Fünfspaltig (Themen-Übersichtsseite)
  • Text/Bild Einspaltig volle Breite Hochformat (Themen-Übersichtsseite)
  • Text/Bild: Einspaltig halbe Breite Quadratisch und Zweispaltig Quadratisch (Themen-Übersichtsseite)

2:1

  • Auto-Teaser (Startseite)
  • Bild im Reiter "Inhalt" groß (außer Themen-Übersichtsseite)
  • Bühne (Startseite)
  • RSS-Feed (Startseite)
  • SimpleSearch Text unter dem Bild (SimpleSearch Einleitungsbild)
  • Teaser (Startseite)
  • Text/Bild (Startseite)
  • Top-Box (Startseite)

4:3

  • Bild im Reiter "Inhalt" (Teaser)
  • FAQ Querformat
  • Karte
  • RSS-Feed (Artikel)
  • SimpleSearch Text rechts neben dem Bild (SimpleSearch Einleitungsbild)
  • SimpleSearch Teaser-Größe quer (SimpleSearch Bilder in der Tabellenspalte)
  • Teaser Querformat (Artikel, Übersichtsseite, Newsletter Webansicht)
  • Text/Bild Querformat (Artikel, Übersichtsseite, Sidebar, Pressemitteilung, Formular, Newsletter Webansicht)
  • Text/Bild maximale Breite (Artikel, Übersichtsseite, Sidebar, Pressemitteilung, Formular, Newsletter Webansicht)
  • Text/Bild mehrspaltig Querformat (Artikel)

3:4

  • FAQ Hochformat
  • Lebenslauf
  • RSS-Feed (Artikel)
  • SimpleSearch Teaser-Größe hochkant (SimpleSearch Bilder in der Tabellenspalte)
  • Teaser Hochformat (Artikel, Übersichtsseite, Newsletter Webansicht)
  • Text/Bild Hochformat (Artikel, Übersichtsseite, Sidebar, Pressemitteilung, Formular, Newsletter Webansicht)
  • Text/Bild mehrspaltig Hochformat (Artikel)

2,5:1

Dieses Bildformat wird nur auf der Themen-Übersichtsseite verwendet.

  • Auto-Teaser halbe Breite Querformat
  • Auto-Teaser volle Breite Querformat
  • RSS Liste halbe Breite Querformat
  • RSS Liste volle Breite Querformat
  • Teaser: Einspaltig volle Breite Querformat, Einspaltig halbe Breite Querformat und Zweispaltig Querformat
  • Text/Bild: Einspaltig volle Breite Querformat, Einspaltig halbe Breite Querformat und Zweispaltig Querformat

3:1

  • Bild im Reiter "Inhalt" (Themen-Übersichtsseite)

ohne festes Seitenverhältnis

  • Bebauungsplanausschnitt (Seitentyp)
  • Galerie
  • Imagemap
  • Logo Footer (Metanavigation)
  • Logo Header (Metanavigation)
  • SimpleSearch Bild unskaliert (SimpleSearch Bilder in der Tabellenspalte)
  • Text/Bild (Vergrößerung)
  • Video / Audio - Vorschaubild nur Video

Sortiert nach Flexmodul / Seitentyp mit minimalen Pixel-Angaben

Auto-Teaser (Startseite)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 480px (ehem. 300px)
  • minimale Bildhöhe 240px (ehem. 150px)

Bebauungsplanausschnitt (Seitentyp)

Querformat

  • Seitenverhältnis ohne
  • minimale Bildbreite 980px (ehem. 780px)
  • minimale Bildhöhe variabel

Hochformat

  • Seitenverhältnis ohne
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe variabel

Bild im Reiter "Inhalt" (groß)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 980px (ehem. 540px)
  • minimale Bildhöhe 490px (ehem. 270px)

Bild im Reiter "Inhalt" (Teaser)

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Das ist die Anzeigegröße im Auto-Teaser mit Teaser-Ansicht.

Bühne (Startseite)

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

FAQ

Querformat

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Hochformat

  • Seitenverhältnis 3:4
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 640px (ehem. 221px)

Galerie

  • Seitenverhältnis abhängig vom Ausgangsbild (ehem. 1:1; ohne Seitenverhältnis)
  • maximale Bildbreite 980px (ehem. 125px - klein; max. 800px - Vergrößerung)
  • maximale Bildhöhe 735px (ehem. 125px - klein; max. 800px - Vergrößerung)

Das Bild wird in diesem Rahmen angezeigt, aber nicht auf diese Maße hoch 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.

Imagemap

  • Seitenverhältnis abhängig vom Ausgangsbild
  • das Bild wird in Originalgröße angezeigt, aber maximal so breit wie die Seite
    • 980px (ehem. 540px Breite bei Seiten mit Navigation und Servicespalte)
    • (ehem. 800px Breite bei Seiten ohne Navigation und/oder Servicespalte)

Karte

  • es können Bilder für die händischen Marker geplegt werden
  • es kann nur ein Bild hinterlegt werden, welches bei beiden Varianten angezeigt wird

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 (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Lebenslauf (Seitentyp)

  • Seitenverhältnis 3:4 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 480 px (ehem. 250px)
  • minimale Bildhöhe 640px (ehem. 340px)

Logo Footer (Metanavigation)

  • ohne Standard-Seitenverhältnis
  • minimale Bildbreite 180px
  • minimale Bildhöhe 40px

Logo Header (Metanavigation)

  • ohne Standard-Seitenverhältnis
  • minimale Bildbreite 240px
  • minimale Bildhöhe 56px

Logogalerie (Footer)

  • Seitenverhältnis 1:1
  • (ehem. unskaliert)
  • minimale Bildbreite 480px
  • minimale Bildhöhe 480px

RSS-Feed (Artikel)

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

RSS-Feed (Startseite)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 480px (ehem. 300px)
  • minimale Bildhöhe 240px (ehem. 150px)

SimpleSearch Einleitungsbild (Seitentyp)

Text rechts neben dem Bild

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Text unter dem Bild (sowohl mit als auch ohne Sidebar)

  • Seitenverhältnis 2:1 (ehem. 2:1/ohne Seitenverhältnis)
  • minimale Bildbreite 980px (ehem. 540px/780px)
  • minimale Bildhöhe 490px (ehem. 270px/280px)

SimpleSearch Bilder in der Tabellenspalte (SimpleSearch)

Teaser-Größe quer (166x125)

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Teaser-Größe hochkant (166x221)

  • Seitenverhältnis 3:4
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 640px (ehem. 221px)

Bild unskaliert (bei PDB autoscale)

  • Seitenverhältnis abhängig vom Ausgangsbild
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

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

40 x 40 (Quadrat)

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 40px)
  • minimale Bildhöhe 480px (ehem. 40px)

80 x 80 (Quadrat)

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 80px)
  • minimale Bildhöhe 480px (ehem. 80px)

Teaser (Artikel, Übersichtsseite, Newsletter Webansicht)

Querformat

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Hochformat

  • Seitenverhältnis 3:4
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 640px (ehem. 221px)

Teaser (Startseite)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 480px (ehem. 300px)
  • minimale Bildhöhe 240px (ehem. 150px)

Text/Bild (Artikel, Übersichtsseite, Sidebar, Pressemitteilung, Formular, Newsletter Webansicht)

Querformat

  • Seitenverhältnis 4:3
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 360px (ehem. 125px)

Hochformat

  • Seitenverhältnis 3:4
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 640px (ehem. 221px)

maximale Breite

  • Seitenverhältnis variabel
  • minimale Bildbreite variabel - maximal 980px
  • minimale Bildhöhe variabel

Text/Bild (Startseite)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 480px (ehem. 300px)
  • minimale Bildhöhe 240px (ehem. 150px)

Text/Bild (Vergrößerung)

  • ohne festes Seitenverhältnis

Text/Bild mehrspaltig (Artikel) NEU

Querformat

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

Hochformat

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

Themen-Übersichtsseite (Seitentyp)

Auto-Teaser halbe Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 480px (ehem. 380px)
  • minimale Bildhöhe 192px (ehem. 150px)

Auto-Teaser halbe Breite Quadratisch

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 140px)
  • minimale Bildhöhe 480px (140px)

Auto-Teaser volle Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. 4:3)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 192px (ehem. 125px)

Auto-Teaser volle Breite Quadratisch

  • Seitenverhältnis 1:1 (ehem. 3:4)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 480px (ehem. 221px)

Bild im Reiter "Inhalt"

  • Seitenverhältnis 3:1 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 980px (ehem. 780px)
  • minimale Bildhöhe 327px (ehem. 280px)

RSS Liste halbe Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 480px (ehem. 380px)
  • minimale Bildhöhe 192px (ehem. 150px)

RSS Liste halbe Breite Quadratisch

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 140px)
  • minimale Bildhöhe 480px (ehem. 140px)

RSS Liste volle Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. 4:3)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 192px (ehem. 125px)

RSS Liste volle Breite Quadratisch

  • Seitenverhältnis 1:1 (ehem. 3:4)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 480px (ehem. 221px)

Teaser Einspaltig volle Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. 4:3)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 192px (ehem. 125px)

Teaser Einspaltig volle Breite Hochformat

  • Seitenverhältnis 1:1 (ehem. 3:4)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 480px (ehem. 221px)

Teaser: Einspaltig halbe Breite Querformat und Zweispaltig Querformat

  • Seitenverhältnis 2,5:1 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 480px (ehem. 380px)
  • minimale Bildhöhe 192px (ehem. 150px)

Teaser: Einspaltig halbe Breite Quadratisch und Zweispaltig Quadratisch

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 140px)
  • minimale Bildhöhe 480px (ehem. 140px)

Teaser: Fünfspaltig

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 140px)
  • minimale Bildhöhe 480px (ehem. 140px)

Text/Bild Einspaltig volle Breite Querformat

  • Seitenverhältnis 2,5:1 (ehem. 4:3)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 192px (ehem. 125px)

Text/Bild Einspaltig volle Breite Hochformat

  • Seitenverhältnis 1:1 (ehem. 3:4)
  • minimale Bildbreite 480px (ehem. 166px)
  • minimale Bildhöhe 480px (ehem. 221px)

Text/Bild: Einspaltig halbe Breite Querformat und Zweispaltig Querformat

  • Seitenverhältnis 2,5:1 (ehem. ohne Standard-Seitenverhältnis)
  • minimale Bildbreite 480px (ehem. 380px)
  • minimale Bildhöhe 192px (ehem. 150px)

Text/Bild: Einspaltig halbe Breite Quadratisch und Zweispaltig Quadratisch

  • Seitenverhältnis 1:1
  • minimale Bildbreite 480px (ehem. 140px)
  • minimale Bildhöhe 480px (ehem. 140px)

Top-Box (Startseite)

  • Seitenverhältnis 2:1
  • minimale Bildbreite 480px (ehem. 300px)
  • minimale Bildhöhe 240px (ehem. 150px)

Video / Audio - Vorschaubild nur Video

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

Keywords: Bilder, Format, jpg, jpeg, png, Bildgröße

Abgerufen von „https://support.berlin.de/wiki/index.php?title=Bildgrößen&oldid=22347“