Intro

Images are not only for decoration. They can be a powerful way to capture the user’s attention and communicate your message. You can use the image control to integrate images into your apps. Images are visual representations of objects or functions.

Responsiveness

The size of the image is simply adjusted to the amount of space available.

Size S (Smartphones)

Object page (size S)
Object page (size S)

Size M (Tablets)

Object page (size M)
Object page (size M)

Size L (Desktops)

Object view (size L)
Object view (size L)

Layout

Images can be used in various locations in the app, such as in a list cell or object header, and also in the content area. App developers determine the most appropriate area. See the examples below.

Images placed in a table
Images placed in a table
Image placed in the object header
Image placed in the object header
Image placed in a carousel
Image placed in a carousel
Image placed in a select dialog
Image placed in a select dialog

Behavior and Interaction

Clicking an Image (Optional)

Various options are available in terms of size setting, and the images can also be combined with actions. The most common behavior is clicking the image to enlarge it, which opens a lightbox.

Properties

  • The original image size can be modified.
  • An image can be connected to an image map.
  • Connection to an on-screen user assistance is supported.

Guidelines

  • Provide each image with an alternative text for screen reader users, in case the image is not available or cannot be displayed. In general, the alternative text should contain a description of the visual content, dedicated for blind users’ use.
  • An image can be decorative only. It is considered decorative if the primary focus is on the text and the image content is secondary.
  • Do not use placeholder images if you do not plan to replace them with real images.
  • Do not use icons as images. There is a separate icon font for such cases, which consists of more than 500 scalable pictograms in SAP’s illustrative style.
  • It is extremely important that you choose the right file format when saving your images. Three image formats are used consistently in browsers – PNG, JPG, and GIF.
  • When choosing the format for your image, you should always be conscious of the image quality and file size.
  • High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.
Good quality
Good quality
Poor quality
Poor quality

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

  • Image (SAPUI5 samples)
  • Image (SAPUI5 API reference)