With real-time SAP Design Studio applications getting more and more complex, performance optimization is becoming increasingly critical. One performance related issue that we faced recently was with the loading of images at application startup. None of the images were showing up until background processing was complete. We had to figure out a way to solve this and using data URIs(Uniform Resource Identifiers) seemed the obvious solution.
What is a data URI? A data URI, as we know it, has the contents of the file encoded as a string. So using it helps embed the image in the CSS code. This gives a big performance boost when loading multiple images, because it helps cut down on the many HTTP requests required to load the image files from a location.
But the challenge was to figure out how to use them in SAP Design Studio. Here is the step by step sequence of instructions on using image URIs in SAP Design Studio. We used image URIs in a Textbox Component & in an Image Component.
Image URI in a Textbox
1. Convert the chosen image to the image URI scheme (base64 encoded string) using an online image URI converter. (ex: https://webcodertools.com/imagetobase64converter )

Using Image URIs in SAP Design Studio
Online image URI convertor

2. Copy the contents of ‘CSS background’ and paste it in a class in the CSS file, as in ‘orders’ here.

Using Image URIs in SAP Design Studio
Pasting in CSS file

3. Drag and drop a Textbox in the application. Now give the CSS Class name (here ‘orders’) and set the height and width according to the properties of the original image.

Using Image URIs in SAP Design Studio
Using textbox for image URI

4. Another way to insert the image URI in a Textbox is through the CSS Style in Properties. Insert the same code that you put in the class ‘orders’ in step 2

Using Image URIs in SAP Design Studio
Insert image using CSS style editor

Image URI in an Image Component
This is similar to the previous method and is suitable for small or icon images.
1. After converting the image to a base64 encoded string, copy the image URI code from the online URI converter.
2. Drag and drop an Image component on the canvas. Paste the image URI code in the ‘Image’ property of the component. And your image is ready for display !

Using Image URIs in SAP Design Studio
Image URI code in property
Using Image URIs in SAP Design Studio
Image URI in SAP Design Studio

Pros of using Image URIs
• Since image data gets embedded in the CSS file, HTTP requests to load external image files is significantly reduced. So images load much faster.
• While web browsers will not cache inline-loaded data as a separate resource, external CSS files using data URIs are cached.
• Images get loaded in one shot, without waiting for the background processing to complete.
Cons of using Image URIs
• Content must be re-encoded and re-embedded every time the image changes.
• Base64 encoded data is larger in size than its binary equivalent.
• Sometimes for very large images, resolution is not satisfactory.
I hope this post on using image URIs in SAP Design Studio was helpful and we seek your ideas on how you handled the image loading problem. Reach us at solutions@test.visualbi.com.

Corporate HQ:
5920 Windhaven Pkwy, Plano, TX 75093

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192


Copyright © Visual BI Solutions Inc.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This!

Share this with your friends and colleagues!