Responsive CSS Sprite Generator

Responsive CSS Sprites
About
FAQ
News

Responsive 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. Ordinary sprites are a fixed size, but responsive sprites are able to be resized, for example using max-width: 100%;

If you don't need your sprites to be responsive, you're better off using a normal CSS Sprite Generator.

1: Upload Your Images

Select up to 20 files, total 4MB.

2: Choose Options

Output Type:

JPEG Settings JPEG Artefact Removal: JPEG Quality:

Other Settings CSS Class Prefix: Padding between images: (This will make your file slightly larger but can prevent images bleeding into each other)

3: Create Your Sprite

About

By RoBorg

What is a CSS Sprite?

A CSS sprite is a single image file that contains multiple individual images. You can use sprites 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 does Responsive mean?

There are a few definitions, but in this case we mean that the image is able to be resized to fit the screen, for example using max-width: 100%;. Normally this doesn't work with CSS sprites, but the technique on this page allows it.

What do I get and how do I use it?

This tool generates:

An image file
A block of CSS code
An <img> tag for each image

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

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

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?

Not at the moment. Tweet me if you're interested.

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.

What's all that suspicious-looking "data:" stuff?

That's a base-64 encoded transparent PNG file, the size of the orignal image. This is used to get the aspect ratio right.