Bildgrößen: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
Zeile 70: Zeile 70:
* Bühne (Startseite)
* Bühne (Startseite)
* RSS-Feed (Startseite)
* RSS-Feed (Startseite)
* SimpleSearch Text unter dem Bild  
* SimpleSearch Text unter dem Bild (SimpleSearch Einleitungsbild)
* Teaser (Startseite)
* Teaser (Startseite)
* Text/Bild (Startseite)
* Text/Bild (Startseite)

Version vom 9. August 2021, 08:05 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

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 Quadratisch (Themen-Übersichtsseite)
  • Logogalerie (Footer)
  • SimpleSearch 40 x 40 Quadrat (SimpleSearch Bilder in der Tabellenspalte)
  • SimpleSearch 80 x 80 Quadrat (SimpleSearch Bilder in der Tabellenspalte)
  • Teaser: Einspaltig halbe Breite Quadratisch und Zweispaltig Quadratisch (Themen-Übersichtsseite)
  • Teaser: Fünfspaltig (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

  • Auto-Teaser Querformat (Themen-Übersichtsseite)
  • Teaser: Einspaltig volle Breite, Einspaltig halbe Breite Querformat und Zweispaltig Querformat (Themen-Übersichtsseite)
  • Text/Bild: Einspaltig volle Breite, Einspaltig halbe Breite Querformat und Zweispaltig Querformat (Themen-Übersichtsseite)

3:1

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

ohne festes Seitenverhältnis

  • Galerie
  • Imagemap
  • Logo Footer (Metanavigation)
  • Logo Header (Metanavigation)
  • SimpleSearch Bild unskaliert (SimpleSearch Bilder in der Tabellenspalte)
  • Text/Bild (Vergrößerung)

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)

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)
  • minimale Bildbreite 980px (ehem. 125px - klein; max. 800px - Vergrößerung)
  • minimale 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.

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

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 4:3
  • 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.

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 4:3 (ehem. variabel)
  • minimale Bildbreite fest 980px (ehem. max. 540px)
  • minimale Bildhöhe 490px (ehem. 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 Querformat

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

Auto-Teaser Quadratisch

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

Bild im Reiter "Inhalt"

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

Teaser: Einspaltig volle Breite, 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, 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 4:3
  • minimale Bildbreite 166px
  • minimale Bildhöhe 125px

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

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