Using Image URIs in SAP Design Studio

[former_member204422]

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: http://webcodertools.com/imagetobase64converter )

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

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.

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.

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 !

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 I seek your ideas on how you handled the image loading problem.

Source: Using Image URIs in SAP Design Studio - Visual BI