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


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





Instructions

cssspritestool.com is an easy to use CSS sprites 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 sprite. 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 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 sprite (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

Donate, Share & Translate :

Donate!
Show your appreciation for the application and support future development by donating!




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