CSS Sprites Generator

Select 2 or more images:

Your Selected Images:

Save As:

Image Line Up:

Distance Between Images:
pixels



What are CSS sprites?

CSS sprites make it possible to to join multiple images into one image. You can then use this one image to call the multiple images by using CSS X and Y background coordinates to tell the browser where the multiple specific images are located in the one bigger picture and where to place them on your page.

How do sprites make my site faster?

One of the ways to improve site speed is reducing the number of HTTP requests your site requires to fully display your page. Using a lot of images for design or functional purposes will create a lot of these additional requests. A good way to combat this is to combine images using CSS sprites.

Which images should I use sprites for?

You should only use sitewide images. In other words, images which are used on most of your websites' pages. Follow these steps to detect and download them:

  1. Open your website in a browser window and take a look at your source code (both HTML and CSS).
  2. Now search for the source code for all the sitewide images files (png, jpg or gif files) your website uses, usually for the design of your website.
  3. Now save these images to your hard disk.
  4. Always exclude photos used for articles or similar images which are only used once or twice on your site.

How to make CSS sprites?

Select the images you have saved by following the four steps outlined in the above paragraph and use the CSS Sprites Generator to combine them into one image file by clicking the "Build" button. The generator will also automatically create the CSS code you need to call the multiple images on your site.

How to implement the CSS and HTML code?

- Copy the code in the CSS tab and paste it to your site's CSS script.
- Asjust the background-position: X and Y coordinates to position the image in the exact spot you want it to appear in your website your website. For example:background-position: -808px 25px;

What if I already used CSS to call images?

If you already used CSS to call your images instead of HTML tags you should replace your old CSS code used to call images with the new code found in the CSS tab:
For instance, replace background-image: url('image.png') with background-image: url('sprite.png') background-position: 0px -197px; width: 365px; height: 360px;