MENU

CSS Sprites Generator


Select 2 or more images:

Your Selected Images:

Save As:

Image Line Up:

Distance Between Images:
pixels




CSS SPRITES GENERATOR FAQ

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;

WANT TO ACHIEVE MAXIMUM PAGE SPEED?



Let us take care of your website performance like we've taken care of our own:
CLICK
to learn more

MORE PAGE SPEED TOOLS

CSS Optimization Test

Analyze your CSS to make improvements to the CSS Delivery.

CSS Compressor

Minimize CSS scripts and files for page speed.

Javascript Optimization Test

Analyzes the Javascript delivery of your web pages.

Javascript Compressor

Minify your JS files and scripts to maximize performance.

GZIP Compression Test

Check whether your web pages have Gzip compression enabled.

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.

Caching Test

Check how and whether your website files are cached.

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?

B
Base64 Encoder

Encode JPEG and other files into a Base64 string.

Keep-Alive Checker

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

Line Breaks Remover

Remove line breaks from your scripts to save disk space.

HTTP Header Checker

Check the HTTP server header of your site.