We have already discussed about what CSS sprites are and how CSS sprites can help us to decrease the number of server requests within a website, and how to get started with CSS sprites. But, in this article I’m going to show you another useful online CSS sprites generator which is written by Simpreal. I realized that it’s also one of those Top 10 Free CSS sprites Generators.
This is an open source online CSS sprites generator, but quite different from others in many cases, it works technically great with tons of features listed below and have tested in FireFox and Chrome.
- It can open images in such formats (bmp, png, gif, jpeg)
- Edits the position and size of rectangles
- It adds rectangles to output images
- You can edit rectangles and set for output images yourself
- Outputs CSS styles
- Download the css file
- Download the output images
- Download all files in zip format
How it Works?
You’ll be able to start using Simpreal Online CSS sprites generator by following the steps below:
- First, start by pressing a button “+ Add files” right on the front page
- Secondly, select the images from your computer that you wanted have in CSS sprites
3. On clicking the button configure this will take you through how you want the sprite image and CSS styles, let me tell little bit more about it. In this step, you can use margins, width, height and scale each an every single rectangle of an image according to you.
4. Lastly, click on the tab says “Result” which will output the css style containing background positions over the sprite image in CSS styles and gives you a sprited image which contains the overall images into a single image which really works to decrease the number server requests by creating only one image rather than using 10, 20, 30 and so on.
By clicking the button Download you’ll be able to get a .zip file of your sprited image with CSS styles.