Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Image Implementation

The sbb-image component is used to render an image.

Mainly from cdn.img.sbb.ch (with imageSrc), but we can set an external image too.
The size can be set with pictureSizesConfig.


Name Attribute Privacy Type Default Description
alt alt public string | undefined An alt text is not always necessary (e.g. in teaser cards when additional link text is provided). In this case we can leave the value of the alt attribute blank, but the attribute itself still needs to be present. That way we can signal assistive technology, that they can skip the image.
skipLqip skip-lqip public boolean false If set to false, we show a blurred version of the image as placeholder before the actual image shows up. This will help to improve the perceived loading performance. Read more about the idea of lqip here: https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
caption caption public string | undefined A caption can provide additional context to the image (e.g. descriptions and the like). Links will automatically receive tabindex=-1 if hideFromScreenreader is set to true. That way they will no longer become focusable.
copyright copyright public string | undefined If a copyright text is provided, we will add it to the caption and create a structured data json-ld block with the copyright information.
copyrightHolder copyright-holder public InterfaceImageAttributes['copyrightHolder'] 'Organization' Copyright holder can either be an Organization or a Person
customFocalPoint custom-focal-point public boolean false Set this to true, if you want to pass a custom focal point for the image. See full documentation here: https://docs.imgix.com/apis/rendering/focalpoint-crop
decoding decoding public InterfaceImageAttributes['decoding'] 'auto' If the lazy property is set to true, the module will automatically change the decoding to async, otherwise the decoding is set to auto which leaves the handling up to the browser. Read more about the decoding attribute here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
focalPointDebug focal-point-debug public boolean false Set this to true, to receive visual guidance where the custom focal point is currently set.
focalPointX focal-point-x public number 1 Pass in a floating number between 0 (left) and 1 (right).
focalPointY focal-point-y public number 1 Pass in a floating number between 0 (top) and 1 (bottom).
imageSrc image-src public string | undefined Right now the module is heavily coupled with the image delivery service imgix and depends on the original files being stored inside AEM. You can pass in any https://cdn.img.sbb.ch img src address you find on sbb.ch to play around with it. Just strip the url parameters and paste in the plain file address. If you want to know how to best work with this module with images coming from a different source, please contact the LYNE Core Team.
importance importance public InterfaceImageAttributes['importance'] 'high' The importance attribute is fairly new attribute which should help the browser decide which resources it should prioritise during page load. We will set the attribute value based on the value, we receive in the loading attribute. 'eager', which we use for the largest image within the initial viewport, will set the attribute value to 'high'. 'lazy', which we use for images below the fold, will set the attribute value to 'low'.
loading loading public InterfaceImageAttributes['loading'] 'eager' With the support of native image lazy loading, we can now decide whether we want to load the image immediately or only once it is close to the visible viewport. The value eager is best used for images within the initial viewport. We want to load these images as fast as possible to improve the Core Web Vitals values. lazy on the other hand works best for images which are further down the page or invisible during the loading of the initial viewport.
performanceMark performance-mark public string | undefined With performance.mark you can log a timestamp associated with the name you define in performanceMark when a certain event is happening. In our case we will log the performance.mark into the PerformanceEntry API once the image is fully loaded. Performance monitoring tools like SpeedCurve or Lighthouse are then able to grab these entries from the PerformanceEntry API and give us additional information and insights about our page loading behaviour. We are then also able to monitor these values over a long period to see if our performance increases or decreases over time. Best to use lowercase strings here, separate words with underscores or dashes.
pictureSizesConfig picture-sizes-config public string | undefined With the pictureSizesConfig object, you can pass in information into image about what kind of source elements should get rendered. mediaQueries accepts multiple Media Query entries which can get combined by defining a conditionOperator. Type is: stringified InterfaceImageAttributesSizesConfig-Object An example could look like this: { "breakpoints": [ { "image": { "height": "675", "width": "1200" }, "mediaQueries": [ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-large-min" }, "conditionOperator": false } ] }, { "image": { "height": "549", "width": "976" }, "mediaQueries": [ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-small-min" }, "conditionOperator": false } ] }, { "image": { "height": "180", "width": "320" }, "mediaQueries": [ { "conditionFeature": "max-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-micro-max" }, "conditionOperator": "and" }, { "conditionFeature": "orientation", "conditionFeatureValue": { "lyneDesignToken": false, "value": "landscape" }, "conditionOperator": false } ] } ] }
borderRadius border-radius public 'default' | 'none' | 'round' 'default' Border radius of the image. Choose between a default radius, no radius and a completely round image.
aspectRatio aspect-ratio public InterfaceImageAttributes['aspectRatio'] '16-9' Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'
disableAnimation disable-animation public boolean false Whether the fade animation from blurred to real image should be disabled.
Transparent Image
No Caption No Radius
Round Border Radius
HTML-Markup kopiert.
Border Radius Default Ohne Rund Caption Ja Nein Seiten-Verhältnis Kein Seitenverhältnis 1-1 1-2 2-1 2-3 3-2 3-4 4-3 4-5 5-4 16-9 9-16 Hintergrund White Milk Iron Charcoal Black
Imprint Contact Cookie settings