Introduction and Overview
What is an image sprite?
An image sprite is a collection of images that have been combined into a single image. Image sprites are most commonly used for images that are seen throughout a site and are generally not used for page specific images due to the amount of work it takes to create an image sprite. An example of where image sprites could be used would be for images that appear in a sites navigation or for icons that are used repeatedly on multiple pages, such as social networking icons in a sites header or footer.
Why use image sprites?
Every time an image is loaded on a web page a server request is generated and bandwidth is used. For sites that contain multiple images in repeated areas this can slow down load times, especially for users on slower connection speeds. In order to lower the number of server requests and to minimize the amount of bandwidth used on images, image sprites may be used.
Where can I see Image Sprites in use?
To see image sprites in action, visit www.bradlilley.com, where sprites have been used for all of the header and footer navigational links. In this example, there appear to be a total of 23 images or icons, 46 if you count the hover state of each link, but in reality only two images are being used; One for the header links and one for the footer links.
The header is built using only one image sprite but appears to contain a total of 4 images. (8 if you count the hover state of each image.) To see what this sprite looks like without any CSS formatting click Here .
The footer is built using only one image sprite but appears to contain a total of 19 images. (38 if you count the hover state of each image.) To see what this sprite looks like without any CSS formatting click Here .
How do I create a sprite?
Image sprites can be made using any number of image-editing programs such as Photoshop, Illustrator or Fireworks. These three are probably the best programs for sprite creation, but there are cheaper or even some free solutions available on the web.
To implement the sprites you will also need a text editing program such as Textmate or Sublime text. You have the option of using a WYSIWYG (What you see is what you get.) editor such as Dreamweaver, but it is recommended that you use a plain text editor as it will give you more control over your code and prevent frustration later on.
The following steps will walk you through the basics of creating an image sprite. There are hundreds of additional tutorials on the web that can be found by doing a simple search for “css image sprites”. In addition, we have also listed several useful resources at the end of this post to help you get started.
Step 1: Asset creation and organization.
The first step in creating image sprites is to gather and combine any pre-existing images into one file. If there are no pre-existing images for you to use you will need to create the images that will be used in your sprite. It is recommended that you use vector images if at all possible as this will allow for easier scaling of the images and will prevent image quality degeneration if the image needs to be re-sized multiple times. Using vector images will also make it easier to change or update your images in the future.
Once all of the assets have been created and gathered into one file, you will then need to lay-out the images in an organized manner, paying close attention to your alignment, padding and margins. This is especially true when working with sprites that will contain a hover state, in which case being off by even 1 pixel can affect the way your sprite behaves. You can adjust the alignment of the sprites with code once they have been implemented, but getting the alignment right in the beginning will save you time and frustration later.
Step 2: Image optimization.
After all of the images for your sprite have been created and are properly aligned you will need to optimize the images for the web and save the images in the appropriate file format. The format that you choose will be based on a number of factors such as transparencies and image quality. If you are using a Photoshop it is recommended that you use the “Save for Web & Devices..” feature and choose the format that offers the best quality with the lowest file size. In the example listed above the sprites are all in .png format because the images needed to have a transparency but required more detail than a basic .gif could offer. Choosing the right format at this phase is crucial because it would defeat the purpose of using sprites if our final image ended up being so large that it used more bandwidth to load than all of the separate yet smaller images combined. We will not cover it here, but it is worth mentioning that you may also elect to use Interlaced and/or Progressive images with sprites if needed.
How do I implement a sprite?
After you have created and optimized your sprites for use on the web, you will need to implement them using HTML and CSS. There are several techniques that can be used including the Phark or Fahrner Image Replacement techniques when working with image sprites. The basis of these techniques is to position your sprites while maintaining semantic, standards-compliant code that can still be access by search engine crawlers and individuals with disabilities. This is especially true when using sprites for any navigational elements within your site and it is never a good idea to use purely image based links, as this will prevent search engines from crawling your site and will make your site inaccessible to individuals using assisted devices such as screen readers.
To demonstrate how sprites work we will again use www.bradlilley.com’s main navigation. The HTML and CSS code below is what controls the links and their hover states.
The main navigation for www.bradlilley.com is built using a simple unordered list where each list-item has the sprite image set as its background and gets its own unique id. These id’s are what we will use to position the the sprite with css.
Each list-item, with its unique id, has an normal and hover state where the “background-position” is set according to the position of the image contained within the sprite being used. In this example each menu-link is exactly 40 pixels tall and each instance of the image sprite decreases by 45 pixel per link to offset the images contained within the sprite. The reason the offset is 45 and not 40 is because there is a 5 pixel padding between each image in the sprite itself. You will also notice that there is a 90 pixel offset between each menu-links “normal” state. This is because each image contained within the image sprite has a combined total height of 45 pixels, and the normal state repeats every other image, thus 45 + 45 = 90. This is how this particular site utilizes sprites, and is by no means the only method available. Sprites can be laid out as you see fit and are not restricted to this exact method.
Conclusion
While image sprites may take a little bit more work up front, they are definitely a viable and streamlined option for anyone looking to lower the amount of bandwidth used loading images on any their site. Using image sprites also helps clean up a sites image folder by combining multiple images into one larger image that can be updated with minimal effort.
Additional Resources
The following is a list of additional resources that you may find useful while creating your own image sprites.
W3C Schools – CSS Image Sprites
A List Apart – Image Slicing’s Kiss of Death
CSS-Tricks – CSS Sprites: What They Are, Why They’re Cool, and How To use Them
