CSS Sprite generators
When you request a web page to the corresponding web server via your web browser on the local machine, it made HTTP requests for content, images and the whole information necessary to display the web page on your local machine. So to reduce those HTTP requests for images we use CSS Sprites. CSS Sprites are a way by which you can reduce the number of HTTP requests for the image that your browser made. This will in turn reduce the loading time of the web page you requested and finally in turn increases the efficiency, proficiency of your web page on the internet.
How to use them?
Basically, CSS Sprites merge more than one image into a single image so that the browser can reduce the number of HTTP requests for images from the server. Less images will result in less http requests that will further result in faster loading time. Also they are pretty easy to use as online CSS Sprites generators are available. A list of them are mentioned below. You can choose the best for yourself although all of them are quite good.
- CSS Sprites (http://csssprites.com/)
The CSS Sprites Generator is really easy to use, all you have to do is just choose the images from your system and just upload it. This tool allows you to specify padding between the elements, border around the whole image, background color and the alignment of the image. You must choose smaller files for merging because the CSS Sprites are basically used for merging small images into a bigger one. So, there will be no use if you choose big image files.
- CSS Sprite Gen (http://css.spritegen.com/)
CSS Sprite Gen allows you to choose and upload the image to merge into a single image. This tool will help you in generating a single image and the CSS code corresponding to it. To do this you have to follow the simple steps given below,
1. Upload the image file and add the CSS style sheet to it.
2. Replace your images with the code so that the sprites can load.
- Sprite Me (http://spriteme.org/)
Sprite Me is a one step sprite generator, it’s free to use and can generate sprites to reduce the HTTP requests. It will help you to merge a number of image files into a single one. Also you can create style sheets corresponding to that image.
- CSS Sprite Generator (http://spritegen.website-performance.org/)
The CSS Sprite Generator is very simple to use. It has all the fields that you want to specify for your style sheets. The CSS Sprite Generator has a very user friendly interface. Especially, it is available in many languages. You can choose the language in which you want to generate CSS Sprites. There are a number of options available there like, specifying source files, image duplication, resizing source images, sprites output options and a lot more.
- CSS Sprites (http://css-sprit.es/)
The CSS Sprite application allows you to merge multiple image file into a single image so as to improve the loading time. This application helps you to generate the HTML and CSS corresponding to the image file chosen. It is very easy to use and after generating HTML and CSS you can easily embed that into your source code file of your web page.
Smart Sprites (http://csssprites.org/)
Smart Sprites help you in generating CSS Sprites easily and introduce them in your web page’s design. Basically, it parses special directives that you can insert into the original CSS of your web page. It then prepares image sprites from those and automatically insert CSS style sheets into your web page.