What is a Sprite?

A sprite is one of the most commonly used techniques in the game industry to speed up the process of displaying animations on a screen.

By combining numerous small images or icons into a larger image called a sprite, and managing the presentation of the smaller images in a web page, designers realized they could reduce the number of requests to the server.

Multiple sprites are then combined into a big image called a sprite sheet. Once a sprite sheet is loaded into the memory, different sprites are rendered in quick succession to give the illusion of animation.

Usually, elements like logos, navigation arrows, buttons are included in the sprite sheet as they are almost of the same dimensions and are frequently used in a web page.

CSS Sprites

CSS Sprites help you get the image once and move it around and display parts of it. This greatly reduces the overhead of obtaining more images.

In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

In this technique, multiple smaller images usually of the same dimensions are combined into a single big image called a sprite sheet or tile set. This sprite sheet is then used to display individual elements wherever we need them.

Image sprites are generally used for designing a graphic social media bar or a navigation bar to make it more attractive and efficient at the same time. It is just a method in HTML and CSS to implement a more efficient way of putting images and designing web pages. Additionally, the image size itself is smaller, resulting in less bandwidth usage by the site.

Example of how it helps in Web Development

Generally, when a user opens a page, the browser has to make an HTTP request for each of these files, then download them separately and display them.

By using a single file to call multiple images, the website does not have to make as many outgoing HTML requests. The browser then has to download only one file which is then used to display the required section by offsetting the image.

 

Advantages and disadvantages of Using CSS Image Sprite

There are many advantages of using CSS sprites over normal images:

 

• Faster page loading: The images load faster making switching from one image to another on some event much smoother. Loads images immediately.  Enhances the page loading time as images used in the web page appear as soon as the sheet is downloaded.
• Lower resource usage: Not only does this technique improve the end-user experience by making the page load faster, but it also reduces network congestion as a lower number of HTTP requests are made.
• Reduces overall image size:  As every kb matters, combining all of your reusable assets into one file will be smaller than if you sliced them individually.
• Independent of JavaScript: Hence less code to maintain, easier cross-browser testing, can be coded inline via style attributes, and no DOM hacking.
• Flexibility: It is flexible over the website’s layout and design.

Also, there are some drawbacks that should be noted:
 

1. Higher development time: For slicing, combining, and programming background positions in the CSS.
2. More maintenance time: Whenever any modification is needed, the full sprite has been re-generated carefully.
3. Less SEO friendly: Images sometimes are better to be placed in the HTML than being in the background. HTML images can contain their Titles and Alternative texts which are more beneficial to SEO, while CSS backgrounds cannot do it effectively.

Tools to Help

There are free online tools available that you can use to automate the entire process.
Here are some of the best Sprite Sheet generators:
 

1. Lemonade
   Extremely simple and easy to use, Lemonade uses Sass as mentioned above. All you need to do is add a line of code to your Sass or SCSS Files and you're done - a sprite is generated.
    
2. SpriteMe
   A fantastic bookmarklet-based sprite sheet generator and viewer. It will quickly generate a sprite sheet that you can export and also generates the associated CSS for the new sprite. It even injects the sprite into the current page. If you're used to working with individual images, this offers the easiest transition to working with sprite sheets.
    
3. CSS Sprites
   A fantastic online sprite sheet generator. You can easily upload a bunch of images at once, choose your output filetype and even choose to get either Sass and CSS code as a result.
    
4.  SpriteRight
   SpriteRight is available on the Mac App Store, and is great for generating sprite sheets. Import your individual images or even import a stylesheet and it will get all the images for you. The CSS is created on the fly.
    
5. Glue
   Glue is a simple command line tool for generating sprites.
    
6. SpritePad
   An extremely simple way to make your own sprites - it's "lightning fast". Easily create your sprites and the CSS code is done for you - everything is drag and drop based.
    
7. Project Fondue
   A good generator with plenty of options. You upload a .ZIP of all the images that you’d like turned into a sprite and it takes care of the rest. It spits out an image and all of the various “background-position” values that you need.
    
8. Sprite Cow 
   This tool helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
    
9. Spritebox
   This one takes a different, slightly less automated route. Instead of creating a sprite image for you, it allows you to upload your already created sprite and define specific areas to generate the resulting CSS. A great tool if you prefer to build sprites in Photoshop and just want help with the code.
    
10. Canvas
    If you’re uploading images for this one, you have to do it one at a time, which is a bit of a pain. If you have links though you can simply paste in a list with corresponding class names and you’re good to go. Options include padding and background colors. It worked well in my testing, definitely worth a look.
     

Steps to Create a CSS Sprite
 

1. Use a CSS sprite generator tool to combine multiple images into one.
   Create a GIF, JPG or PNG mosaic with all the images you want to get
    
2. Upload the combined image file to your site.
   
   
    
3. Add the CSS code to your site
   We need the background-image: url field with the direct link to the combined image file. We also need background-position property which contains coordinates (usually negative values) for positioning the corresponding image
   
   
    
4. Add the provided HTML where you want to display the images.
   We need to add the HTML code for each image at the location where we want that specific image to display in our content
   
   

Final result

Final result on hover

Conclusion

Concepts like sprites are a game-changer in today’s time as it has become extremely important for developers to extract every bit of performance from a webpage.

Many big companies like Google, Facebook, Amazon use CSS Sprites to improve the responsiveness of their websites. They use this method extensively because it helps them reduce the number of HTTP requests per session for a particular user. This is a huge benefit when you consider that these companies serve millions of customers at any given time.

Just remember to prepare your sprite well 🙂

"Simplicity is about subtracting the obvious and adding the meaningful."

— John Maeda