On a dashboard, images create a deep visual impact. They provide a better user experience (UX) for the end-user. As a result, use of images as icons for various functions becomes very common practice in dashboard design.
However, using a lot of images in CSS, as well as directly as images, takes a toll on performance – the higher the number of images, the higher the number of server requests that are required to load these images. Such a situation warrants the use of techniques that can still offer us visual treats, while reducing the performance bottleneck when it comes to images. This is where the use of “CSS Sprites” comes in.
What Is a Sprite?
“Sprites are two-dimensional images which are made up of combining small images into one larger image at defined X and Y coordinates.”
(Source: http://www.tutorialrepublic.com/css-tutorial/css-sprites.php)
This is what a sprite image looks like, after combining all the images into a single image:
To display a single image from this combined image, you can use the CSS background-position property. Example reference to use Background-position property in CSS:
http://www.w3schools.com/css/css_image_sprites.asp
Implementing Sprite CSS in SAP Design Studio
In the next few steps I will show you how you can leverage this great technology in combination with SAP BusinessObjects Design Studio.
The first thing to have ready is a set of icons that you wish to combine and convert into an image sprite. I have icons for search, filter, left navigation, and right navigation. Individually, each of these images have the size of 128x128 pixels (I have provided these images for you if you want to try this out!).
Once we have our images ready, the next step is to combine the images together. There are plenty of websites that offer this service free of charge. One website that I would recommend is:
http://wearekiss.com/spritepad
The website has a neat little interface with an option for users to take a guided tour. This should help you out in uploading individual images.
Upload each of the images that you wish to combine and align them similar to what I’ve shown on the screenshot below:
Images can be brought on to the canvas by dragging and dropping them there. As and when this is done, the CSS for each of the images on the canvas is generated on the right. Once you’re done aligning your images, clicking on “Download” allows you to download a zip file that contains both the sprite image as well as the CSS to be used.
Using the CSS Sprite file inside SAP Design Studio
Now we are ready to use the image and CSS file in SAP BusinessObjects Design Studio.
- Create a new application in SAP BusinessObjects Design Studio. To do this, open SAP BusinessObjects Design Studio and use the menu “Applications->New”. Enter a name and description for your application and then click on ‘Finish’.
2.The first thing to do once you create a new application, is to upload the CSS file that we created for the CSS Image Sprite (previous section). (To find out how to upload a CSS file to your SAP BusinessObjects Design Studio application, visit this link: http://scn.sap.com/docs/DOC-41398).
3.The next step is to make use of an Image component so that we can display the Image Sprite using the CSS file. I configured the image height and width as 124px and 120px and the respectively margins to auto.
4.Now go back to the CSS file that you created previously and identify the class name for the image that you wish to use. For example, here, I would like the image component to display the right arrow. I have identified the class in the CSS file as .s-1427662140_arrow-right-01-128 (marked on screenshot).
5. Now we can set the ‘CSS Class’ property of the image to the CSS Class name that we identified in the previous step (that of the right arrow in this example). Once the CSS class name is confirmed by clicking ENTER on the keyboard, you should be able to see only the chosen image.
6.In a similar manner, we can make use of the CSS classes to set the other images that we included into the Sprite Image as well.
So to summarize:
- You can embed the CSS classes for the Sprite Images along with other CSS classes being used on the dashboard within the same CSS file.
- The use of Sprite Images can improve the overall performance of your dashboard through a reduced number of HTTP Requests. HTTP requests on a browsers are traditionally done in sequence, which means that one request will not start until the previous one is completed. Also, it is expensive to open a connection to do a request. By limiting the amount of requests made on the server, you are increasing the speed the elements load.
- Sprite Images not only can be used in combination with the Image component, but also with the Panel component, and Grid component.
I hope that you liked this short introduction to Sprite Images and that I was able to help you by showing you a way to improve your dashboard performance.
Source:http://visualbi.com/blogs/design-studio/css-tips-tricks-improving-performance-sprite-images/
- SAP Managed Tags:
