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.
This really is cool technique, we also use it in menu’s too. It’s an elegant way of dealing with load times – Anyone have any recommendations for a Spriteme alternative? Thanks, Rhys
One quick tip to add: when using sprites for buttons, make sure to leave a few pixels of space above or below the “hover” state of the button (if applicable). IE 8 has problems rendering background images if they are right next to each other without any space between, but it works great if you have a few pixels of space between.
Great article!
Never underestimate the power of sprites, they make web optimisation fun!
One trick I do is to have a genericSprite class associated to your HTML tags, so you don’t have to list multiple, different, classes in your style sheet when defining your initial sprite.
And for background images that have to repeat, it’s always nice to have a repeat-x or repeat-y sprite, alongside the generic icon sprite.
Nice read.
I’m sorry to say this, but where are the tips?
I understand that you need to explain the basics of sprites to the people who haven’t used it yet, but I was really hoping to learn some new things here. For example, what happens if you wish to use an icon from a sprite, but the element you want to use it in is bigger than the sprite image? How do you make the other images from the sprite, not show up?
Marlou, as far as I know, that is not possible. Perhaps creating a smaller element within your intended element and setting the background to that smaller one (adjusting the size of the smaller element so that it’d only show what you wanted) would work?
Ah yes, that could work. A nice technique can be found here also: https://css-tricks.com/examples/CSSClip/
Have been using sprites for a while and it is a lot easier to implement rollovers as well as faster page loading. Have yet to include an entire site image library in a sprite though like youtube/yahoo do etc.