How to Create and Use Sprites in SmartSpace

Sprites are multi element images whose elements can be each used separately with a custom style sheet (css) file.

For example, when an image menu item is hovered over with a mouse, it may change color. So the two versions of the image are stored in the same file, the original colored image and the hover image.

These two images make up the sprite image.

Why Use Sprites?

• Especially when a website is first viewed, there will sometimes be a lag between an original menu image, the the new image that is supposed to appear when the hover effect occurs
  • Because there is no second image, the hover effect is instant
• Sprites speed up the loading of websites
  • No matter what the size of a file, only a limited number of website elements can be downloaded at any one time, so the elements get backed up waiting for download
  • By reducing the number of elements in the traffic jam, download speeds are increased
• Easier site management
  • By reducing the number of images in a website, it is easier to code and to manage

What  Are Sprites Used For?

Sprites are used for four main things in Smartspace

• Menu Images (where applicable) as mentioned earlier
• Borders
  • The top, bottom, left, right and all corner images can be used in the one file
• Webpage graphics
  • Where fixed sized elements require single background images, each of the images can be stored in a sprite
• Buttons and clickable elements
  • The fixed size of a link or button can be styled for different states of link, hover and click

How Does It Work

The CSS file takes the whole image, and positions it so that the user can only see a portion of that image. This is why sprites can only be used in elements that have a fixed size.

How Are Sprites Made

Sprites for menu items

• Ensure that each image element is identical except for the part of the image that needs to change (eg text color)
  • Make each menu item exactly the same length
  • Place the separate image elements the same distance apart so that each element can be coded the same
• Depending upon whether the images are stacked on top of each other or placed side by side, the image size needs to be divisible by the number of elements in the sprite
  • EG. If three images each of 50px wide, are place side by side, the overall length of the image needs to 150px
  • If this is not done to the pixel, there is sometimes an image "shift" on hover or perhaps a small slice is taken off the beginning or end of the image
• You can place mulitiple elements for mulitple menu items in the one sprite if you wish
• Consider carefully before saving the sprite, whether or not you will need to pad the image or use whitespace around it
• If you are saving a transparent png file, always use the png-24 format for best results
• View the main menu in this website for the use of sprites

Sprites for Backrounds (borders and other elements)

Smartspace technical staff can advise whether or not you can use sprites for backgrounds on your website. Because not all elements are fixed size, it is not always possible to use sprites for this purpose.

We will provide directions on what needs to happen should you be able to utilise sprites for backgrounds.

Here are a few basic thiings to remember about using sprites for backgrounds.

• Ensure the image element sizes are exactly the correct size - you don't want cropping to occur on your background image
• Ensure that if background images are going to be repeated in one dimension, the repeated elements join together so as to make the background look continuous
  • EG, where diagonal lines have to meet at the correct point
• Always use the png-24 format when using transparency to prevent white edges around the transparency
• Whilst sprites are useful, is it often the case where using single images is actually easier and better.
• The SmartSpace overlay uses sprites for all border elements and more

Read this post here for more info on CSS sprites