cssspritestool.com

CSS sprites tool - CSS sprite generator - Free online tool to generate CSS sprites easily with drag and drop, projects


Drop Images here or click to upload. Please upload only PNG, GIF and JPEG Images.


Instructions for CSS sprite generator :

1. Drag and drop the images (css image sprites) and wait.

2. Set the options (image file type, alignment, padding e.t.c.)

3. Press on the "Generate CSS Sprite" button.

4. Copy the generated CSS and HTML code and download the combined image of the css images sprites and put them into your webpage.

Image File Type:
CSS Class Prefix:
Alignment :
Padding : pixels

GIF Transparent Color (RGB or HTML value) :
Leave unchecked to automatically detect transparent color from pixel with x=1,y=1.

Generate CSS Sprite


Download Windows Version of App


Instructions

cssspritestool.com is an easy to use CSS sprite generator tool. CSS Sprites are useful for SEO purposes and for website performance improvement.

cssspritestool.com is unique because it allows you to load and save projects and reuse your work and css sprites another time later.

Simply, drag and drop images (png,gif,jpg images) and then press on the "Generate CSS Sprite" button to generate the css sprites. Then the combined sprite image will be generated and displayed to you and also the required css and html code to use it on your site. Copy and paste this code to your site and download and add the generated image to your site.

To download the generated files directly as a zip archive, press on the "Download Zip Package" button.

If you press on the "Download Zip Package" button then in the Zip archive that you have downloaded, you will find a file called "Project.cssproj.zip". This is the project file and you can use it to reuse your work later.

To open a project with the css sprite generator, simply drag and drop the "Project.cssproj.zip" file and then press on the "Open Project" button that will appear.

You can also set the padding between the images of the sprite, the alignment of the css image sprites (horizontal or vertical) and also the css class prefix. Also, you can set the desired sprite image type (png,gif or jpg).

Maximum Image Size : 25MB

Maximum Number of Images:200

Time till sprite image Files get Deleted: 1 day


Please Donate!

Please Share!
 
Information :

From W3 Organization Article https://www.w3.org/wiki/CSS_background_images#Sprites

Sprites

Users want it all. They want your site to be glamorous, interactive, and also fast, however including large numbers of CSS background images can slow your site down considerably—the more HTTP requests you make, the slower your site will be (an HTTP request is when your computer is accessing a web site and needs to ask the server to send it another asset that makes up the site, such as a CSS file or image - each additional request means a longer loading time for the site). To get around this limitation, you can combine related icons into a single image, known as CSS Sprites. The background-position property allows you to then place the image in the appropriate positions so the icons display through the window of the HTML element the CSS sprites are attached to.

For example in Figure 13, you will see that to display the earth icon through the HTML window you can place the image using left top. To move the position of the image so the alert icon is displayed, the background position needs to be changed to -80px 0. The negative horizontal value pulls the image to the left.

Only the part of the background image which is inside the HTML element is visible

Figure 13: Using CSS Sprites to reduce HTTP requests.

More information : CSS Sprites: What They Are, Why They’re Cool, and How To Use Them