CSS Sprites Generator

Select 2 or more images:

Your Selected Images:

Save As:

Image Line Up:

Distance Between Images:


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.

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.

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.

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.

- 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;

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;


Let us take care of your website's performance as we've taken care of our own:


Website Speed Test

Test and analyze the loading times of your website.

CSS Compressor

Minimize CSS scripts and files for page speed.

Caching Test

Check how and whether your website files are cached.

GZIP Compression Test

Check whether your web pages have Gzip compression enabled.

Javascript Compressor

Minify your JS files and scripts to maximize performance.

Image Optimization Test

Tests your image delivery so you can improve it.

PNG Compressor

Reduce your PNG image filesize while keeping quality.

JPEG Compressor

Play with the quality and size of JPEGs to save disk space.

CSS Sprites Generator

Place multiple images in one image to make fewer requests.

CSS Optimization Test

Analyze your CSS to make improvements to the CSS Delivery.

Javascript Optimization Test

Analyzes the Javascript delivery of your web pages.

Broken Links/Requests Test

Test your web pages for broken links and requests.

HTTP Requests Checker

How many HTTP requests do your web pages produce?

Base64 Encoder

Encode JPEG and other files into a Base64 string.

Keep-Alive Checker

Check whether your website has keep-alive settings as enabled.

HTTP Header Checker

Check the HTTP server header of your site.