B://B: What the Sprite was That?

 

Primer:

I thought that I would start a series of fairly straight forward posts that refer to the basics that are so often overlooked in web development and more specifically the realm of front end development. Utilizing sprites should be one of those techniques that it’s a no brainer and have no second thoughts/reasons on why not to use them. In case you did forget, the sprite is in reference to early video game developers who used a large image to contain multiple states of an entity while preserving precious space on the game media at the time.

Josh Cooper
#Development | Posted

Primer:

I thought that I would start a series of fairly straight forward posts that refer to the basics that are so often overlooked in web development and more specifically the realm of front end development. Utilizing sprites should be one of those techniques that it’s a no brainer and have no second thoughts/reasons on why not to use them. In case you did forget, the sprite is in reference to early video game developers who used a large image to contain multiple states of an entity while preserving precious space on the game media at the time.

In a way the same still stays true right now. By combining 10 x 1kb images into 1 x 10kb image we don’t preserve any more space on the disk. Rather we don’t have 10 http requests to download the images, but 1 http request to the server which ultimately reduces response time and is one of the easiest performance boosters for improving your website. With the help of some image services, as well as careful image optimization, the combined sprite image can actually be smaller than the sum of its parts, thus gaining more performance by reducing your http request size.

Typically sprites should only be used for fixed height/width objects because they aren’t the best for repeatable regions or elements that expand in size. The background image by default will repeat, so rendering may be off if you don’t carefully consider your sprite usage. With the use of the sprite, it will continue to show the rest of the image and other areas of the sprite might sneak into view. Utilizing careful layout consideration sprites can be used to place an image in an element that will expand or grow; I will refer to that technique later.

Typical usage of a sprite would be the following:

A typical usage example of this sprite might be the following.

  1. #nav li a {background-image:url('../img/share_sprite.gif)}
  2. #nav li a.item1 {background-position:0px 0px}
  3. #nav li a.item2 {background-position:0px -30px}
  4. #nav li a.item3 {background-position:0px -60px;}
  5. #nav li a.item4 {background-position:0px -90px;}
  6. ...

The common element here is the anchor tag found within the list item. The sprite (share_sprite.gif) is applied to the common element, but using the more specific classes (item1, item2 etc) we can apply different areas of the sprite to those elements via the background-position property. The numerical values go x and y relative to the sprite. In the example above, all the background position changes are in the negative y direction because the images are stacked on top of one another, so the main value that is changing is the position of the y coordinate.

Extra Tips and Tricks:

To make life easier when dealing with a sprite sheet, I like to create a grid in Photoshop in order to make finding coordinates easier to remember/find. Instead of remembering -263px -538px, it’s slightly easier to snap to -250px -530px or whatever the rounded coordinates might be based on your grid you use. I typically like to create a grid with guidelines at every 30 pixels. It creates a cleaner sprite and makes it easier to line up common items like icons or hover/rollover/active effects.

Another thought for dealing with repeatable background images and sprites is to create a 1px vertically or horizontally (depending on the application you need it for) image and utilizing the coordinates to place the background image for your element. A word of warning, this can lead to very tall (1000+ pixel) sprite images and sometimes difficult to track where the background image begins or ends. This technique only works if you know the height/width of the container because if the size of the element grows vertically or horizontally in reference to your sprite, it will continue to show the rest of your sprite, which may not be desired. See example for vertical sprite.

One argument against this technique might be the use of css3 background gradients which eliminate the use of a sprite and http request all together. Unfortunately css3 isn’t cross browser compliant so your flavors of IE would suffer and would have to result with a background image default for IE which basically creates an http request anyways, so in some cases it might worth it to use the background image. Of course this all depends on your audience and demographics to see whether it would be beneficial to optimize your site.

Another technique for arranging your sprite to work with expanding containers is to stagger the images on a diagonal, so that the x and y below them have no other image in its path. This allows the image to be placed in your element the way you desire it to be, but also allow for the left-to-right, up-to-down growth that certain elements might experience. This may not be ideal for every situation, but it allows the use of a sprite rather than multiple background images that would increase http requests.

Finally, there is no reason to have a mega-sprite. Grouping common images together in their own unique sprites allows for a better organizational scheme and doesn’t leave it up to the end user to download a very large sprite. If an image is used on a particular section of your site only, then there doesn’t necessarily seem to be a reason to download a much larger image that contains other images found elsewhere on the site and not on the one you’re viewing.

Wrap up:

Sprites serve as a very powerful tool for your website. They provide better performance, organization and cleaner CSS code. Gone are the days of slicing many images to make up the layout and look of your website and it’s time to embrace the simplicity that comes from utilizing sprites. Whether you want to create them manually or use an online sprite generator, either way its good basic practice for the longevity of your website.

Josh Cooper