CSS Sprites

CSS Sprites helps you to combine multiple image files into a single file, which can help your website to reduce the number of HTTP requests and improve loading speed.

Step 1: Upload Your Images(ZIP)

Add Images (ZIP) ...

Step 2: Choose Options

Basic Output Options

cannot start with a number
Show more options

Image Duplicates

Resize Source Images


Sprite Output Options

If left blank white will be used for non-transparent images, black for transparent

CSS Output Options

CSS to insert before the class name
e.g. icon-([0-9]+).png - matches the numeric part of each filename and uses this for the class names in the generated CSS
CSS to insert after the class name
Provides the height and width of each sprite in the CSS.

Step 3: Create your CSS sprites


CSS Sprites Notes

  • Only image ZIP files (.zip) are allowed.
  • The maximum file size can not be larger than 5M.