UI Elements Display Image

Updated: June 10, 2020
SAPUI5 Version 1.76

Image

sap.m.Image

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 dialog
Image placed in a 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.

  • Dialog

Properties

  • The original image size can be modified.
  • An image can be decorative only.
  • An image can be connected to an image map.
  • You can trigger an action for navigation.
  • Connection to an on-screen user assistance is supported.

Guidelines

  • For accessibility reasons, provide each image with an alternative text in case the image is not available or cannot be displayed.
  • 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)