CSS Sprites

CSS sprites allow you to combine multiple images into a single file. This reduces the number of HTTP requests, speeding up page loading.

If you need your sprites to be responsive, use the Responsive CSS Sprite Generator.

1: Upload Your Images

Select up to 20 files, total 12MB.

2: Choose Options

JPEG Settings
Other Settings

3: Create Your Sprite

About

By RoBorg

What is a CSS Sprite?

A CSS Sprite is a load of images lumped together into a single image file. They're used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users have to make. Each request will contain the overhead of HTTP headers (including cookies) and the connection's latency. By using a single image file instead of many, you can dramatically decrease the time it take your pages to load.

What do I get and how do I use it?

This tool generates:

First upload the image file and add the CSS to your stylesheet. Then replace your images with code to load the sprite. CSS classes are generated from the image filenames you upload, so for example: <img src="icon.png"> might become <div class="icon"></div>

Frequently Asked Questions

Who wrote this?

Greg, AKA RoBorg did - I'm a professional PHP programmer for Just Say Please.
You can follow me on Twitter

profile for Greg at Stack Overflow, Q&A for professional and enthusiast programmers

How do I report a bug?

At the moment just via Twitter.

How long do you store my source images and sprite for?

They're not stored on the server.

Are images I upload private?

Yes.

Is there an API?

Yes - see the CSS Sprites API page.

Is this project open source

Not at the moment, but if I receive enough interest I might clean up the code and release it.

How is this website written?

The sprite generator is written in PHP, using the GD image functions. The transparent PNGs are manually generated.

Latest News

Aug 2017

May 2014

Jan 2014

Jul 2011

Nov 2010