Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles:
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
| Aspect Ratio | Non-Retina | Retina | Retina-HD (iPhone 7) | |
|---|---|---|---|---|
| Tablet | 48:25 | 768x400 | 1536x800 | |
| Desktop | 83:30 | 1328x480 | 2656x960 | |
| 4K | 83:30 | 2656x960 | 2656x960 | |
| Mobile | 166:133 | 320x266 | 640x532 | 960x798 |
| 5K |
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.