CSS Sprite Generator
Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites.
All the work will be done in your browser, so don't worry about sending your images over the Internet.
The general reason for creating sprites is to make your webpages load quicker, instead of loading say 10 separate images, with a sprite you only load one image. Once you are ready, follow the instructions below to get started.
With thanks to Brian Grinstead for the code to this generator.
Note: This generator only works with the latest browsers!
Loading, please wait...
- Select multiple image files from your computer
- Drag and drop files from your desktop onto the page
- Use a few sample images to try it out
About CSS Sprites
Using CSS sprites on your website can improve performance and organize your interface elements intelligently.
A Sprite Sheet is one large image of small graphical elements on a website, such as icons or buttons, and thanks to CSS properties background and background-position, you can render each element separately.
The main advantage of using sprites is that the server loads all the elements in one file at once. some may think that loading small, lightweight images can increase the performance of the site, but this is not the case - in the case of individual images, the number of HTTP requests increases. Also, when using a single sprite, it can reduce the size of the graphics.