Spriting is a skillset in the web design field gaining lots of credibility. We initially saw these techniques applied to high-traffic websites such as Yahoo! and Digg. Over time even smaller-scaled web apps began applying sprites to their front end design specs.
We’ll be going over some of the major benefits towards using sprite images in your website designs. The benefits can be found universally in icons, graphics, background patterns and so much more. There are also many unrecognized tools to aid in frontend sprite development and shave time off projects.
So Why Use Sprites?
As a brief description of spriting it’s understood easiest as a front end development technique. Instead of saving button states and icons as separate images you should combine all images into a single file and use CSS positioning to move between them. As an example a button design may have all 3 states – standard, hover, and click – added into a single file spaced between each other.
The benefits should be obvious as they all point towards site optimization. To download a single sprite image takes less time and only requires a single HTTP request. This may not seem like much with 100 visitors daily, but over time you will recognize huge performance benefits.
This same idea can be applied to not just buttons but most nearly any graphic. Background images used in forms and page elements are the most graceful. Sprites can also account for many in-page icons such as alerts and information blocks.
How to Implement Styles
The steps are fairly simple to implement a general sprite image. The first chain in the process is figuring out what images should be included in your sprite graphic. This is most notably a .png file with the exact width/height required to fit each icon within the image.
You could add extra padding between elements if you find the process easier. Extra white space generally won’t add much to the image file, though for full optimization it’s best to cut corners wherever possible.
If you are a meticulous designer and have time to check out fine details it’s recommended to play around with your core file. Many designers call this object your master image. Try processing each icon in graphics software such as Adobe Photoshop to check on file sizes. In some cases the combined total of each individual icon file will be less than holding one master image.
At this point you’d want to focus on applying each image into your page. This can be done with CSS’ background property and url() method. Below is an example applying the same image into a number of elements.
.globe,
.edit,
.save,
.error,
.success {
background: url('../img/icons.png') no-repeat;
}
From this we have applied the same background image into many different classes. From here we can assume what each of these would be used to display as a representative icon. Now this doesn’t help us much, though, since all we get is the same piece of our graphic playing over and over. CSS also has the background-position property to move around icons and page elements.
.globe { background-position: 0 -20px; }
.edit { background-position: 0 -40px; }
.save { background-position: 0 -60px; }
With the example code above we have 3 of the classes mentioned before. All we’ve done is move the positioning of the image relative with each class’ icon. This particular graphic has each icon positioned underneath one another and spaced vertically by 20px each. This is the reason we continually move down by 20px in position each time.
CSS Amendments
Now that our core data is set it’s simple to create extra rules to clarify each page item. Many times you cannot expect to place icons as background images and everything will fall perfectly into place. The addition of extra padding into the edges of any block element will give room for background icons to shine through.
This is especially true for the case of sprite-based website navigation menus. If you’re displaying graphics within your navbar it’s crucial to have spacing aligned perfectly. This may take some time with tinkering on numbers, but once everything is set your design will look golden!
When using a rollover effect it’s also easier to work this way since you’re dealing with the same image and dimensions. All that’s required is a pixel-perfect shot at both the rollover and standard link states. By using gridlines in Adobe Photoshop you are able to count how many pixels you should move down/right for that exact fit.
Best Sprite Resource Tools
There are many individual tools online to help with sprite creation and manipulation. The easiest I’ve run into is SpriteMe which offers most of these tools rolled into one. You are able to drag and upload individual image files and the service will then place them in the most efficient way possible.
Not only this but the generator will spit out exact coordinates for each image within the master file. This comes as a blessing since many developers have spent hours trying to get layouts working properly and losing focus at this level. Tools like SpriteMe can save hours off project time and grunt work.
The generation of sprite images isn’t a crucial development in the design industry. It has shown a lot of promise towards high end performance results and diminishing lost packets of data. It’s a good practice to get into as a web designer since most clients will enjoy the faster load times. The process also makes things easier when it comes to rollover effects.
Even without any graphics design software you are still able to easily create and manage a master sprite image. Aside from SpriteMe there are many tools online offering similar services. Research some of the options and see if any jump across the page. Although sprites are one tool to use it requires a web designer’s entire toolbox to create appealing user-conscious designs.