Do you really understand CSS Sprite? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates.
Having assigned this generated image or sprite generator to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one. The origin of the term “sprites” comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. The sprite was the big combined graphic. CSS Sprites is pretty much the exact same theory: get the image once, shift it around and only display parts of it, saves the overhead of having to fetch multiple images.
CSS Sprite Generator
This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite.
The custom sprite upload feature will help you to find what are the css coordinates for a pre-made image sprite. Simply upload from a file or an URL and select revelant areas, choose a CSS class name or let the tool generate one for you then finish by clicking “Snap!” button to save the corresponding CSS in the CSS code box below.
This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas. This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas.
Simply upload your navigation sprite below, add some guides, name some stuff and hey presto! Nav-o-Matic will generate all the code you’ll need to get your navigation working in a jiffy!
Upload your image, add more than one image and create your sprite, You could also set your output type as PNG, JPEG or GIF.
Spritebox is WYSIWYG tool to help web designers quickly and easily create CSS classes and ID’s from a single sprite image.
Just upload your source file, and create the sprite image and CSS by ignoring the duplicates, resizing the source images, setting the sprite and CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.
A Drupal module for building CSS sprites. Placeholder for what will be a CSS Sprite Generator specific to Drupal. Feel free to post feature requests on what you would like to see for the future of this module.
A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.
This CSS3 generator lets you generate cross-browser compatible CSS for things like rounded corners, box shadows, and @font-face. Just pick something from the drop-down menu and it shows you the appropriate generator.
CSS Sprites Tutorials
This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.
Since each of the above CSS classes use the same icon graphic, we can use a combined CSS rule to add the background graphic for all of them.
Yahoo uses CSS sprites on its home page to improve performance. The first set of icons is displayed in the “Check your mail status” section on the right of Yahoo.com!