Was macht diese Komponente?

• Bilder unterstützen das Verständnis von Texten und lockern textlastige Seiten auf.

Wann soll diese Komponente eingesetzt werden?

• Zur Unterstützung der textuellen Kommunikation können Bilder eingesetzt werden (visuelle Kommunikation).
• Grosse (content-wide) Bilder sollen sparsam eingesetzt werden.

Regeln

• Die Aufbereitung von Bildern und Illustrationen ist durch die Vorgaben von KOM geregelt (siehe Links).
• Illustrationen und Infografiken als SVG einsetzen, bei Fotografien auf genügend grosse Auflösung für alle Screengrössen achten.
• Ausser dem roten SBB Panel dürfen Bilder keine Overlays enthalten.
• Es dürfen nur kontextrelevante Bilder verwendet werden (das Bild muss zum Inhalt passen).
• Kombinieren verschiedener Stile kann die UX positiv beeinflussen (Fotografie für Gegebenheiten, Illustrationen für Konzepte)
• Um die Wichtigkeit von Bildern zu unterstreichen (zu priorisieren), können verschiedene Bildgrössen helfen.
• Bilder haben optional einen Beschreibungstext (Caption).

Varianten und Zustände

Bei Bildern werden folgende Stile unterschieden:

• Fotografie
• Illustration
• Infografik

Key Visual

• Nur Fotografien (keine Illustrationen) verwenden.
• Keyvisuals haben keinen eigenen Informationsgehalt.
• Keyvisuals können statische Bilder oder Videos sein. Animated GIFs sind nicht möglich.
  • Bilder und Videos werden grundsätzlich gleich behandelt.
• Keyvisuals haben nie Bildunterschriften oder Copyright-Infos.
• Keyvisuals haben je Endgerät ein festes Format, der Bildausschnitt passt sich dem Viewport an.
• Keyvisuals können als Mediaslider umgesetzt werden.
• Kein Beschreibungstext erlaubt.

Formate

Infobild

• Infobilder können statische Bilder, animated GIFs oder Videos sein.
  • Statische Bilder, animated GIFs und Videos werden grundsätzlich gleich behandelt.
• Infobilder können optional eine Bildunterschrift und eine Copyright-Info unter dem Bild stehen haben.
  • Empfohlene Textlänge der Bildunterschrift inkl. Copyright-Info: sollte auf Desktop max. 2 Zeilen umfassen.
• Infobilder dürfen kein Panel verwenden.
• Infobilder sind nie verlinkt.
• Infobilder haben immer das Format 16:9.
• Infobilder haben keine Grossansicht.

Lazyload

• Wenn viele Bilder auf einer Seite vorhanden sind, dann werden Bilder ausserhalb des Viewports lazyloaded.

Innerhalb eines Teasers

• Bild muss bei Mouseover leicht reingezoomt werden.

Als Hintergrund (z.B. Karte)

• Beim Scrollen nach unten, wird das Bild eingezoomt, beim Scrollen nach oben wird es ausgezoomt.
• Bild soll den ganzen Viewport des Contentbereichs bedecken.
• Text und Interaktionselemente (Buttons) über dem Bild sind erlaubt.
• Wichtig: Kontraste einhalten → Bilder sollten dunkle Farben beinhalten, sodass Text in weiss darüber geht.