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.
The size of the image is simply adjusted to the amount of space available.
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
Image placed in the object header
Behavior and Interaction
Clicking an Image (Optional)
- 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.
- 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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.