Sprite Generator


Drop images  to upload

( or click )

" dropped and loaded 0 of 0 images "

Thumbnails
Options
.      . . {
    ...
}
Preview
Stylesheet
The text below is just a preview. Use the save button to download the code.
Spritesheet
More Informations

A website generally is a composition of stylesheets, javascripts, images, icons and a lot of other stuff.
Each of these components is a separate HTTP-Request, and the more of them, the less efficient your page is.

A good technique to manage stylesheets and javascripts would be minimizing them in order to have just one file for each one ( one file = one HTTP-Request ).

Is there a way to do the same with small images and icons?

There sure is!

A Sprite Sheet is a collection of images put into one single image and this Sprite Generator will help you to do that.

How does it work?

There was a time in which, had I needed to add images or icons on my personal website, I probably would have written the following HTML code:

<img src="../images/map.png" />
<img src="../images/image.png" />
<img src="../images/image-instagram-frame.png" />
<img src="../images/image-sunset.png" />
<img src="../images/information.png" />
<img src="../images/lock.png" />
<img src="../images/magnet.png" />
<img src="../images/mail.png" />
<img src="../images/image-instagram.png" />
<img src="../images/minus.png" />
<img src="../images/minus-circle.png" />
<img src="../images/monitor.png" />
<img src="../images/notebook.png" />
<img src="../images/plus.png" />
<img src="../images/plus-circle.png" />
<img src="../images/question.png" />

OR this CSS:

.icon { background: none no-repeat left center; }
.icon.map { background-image: url('../images/map.png'); width: 32px; height: 32px; }
.icon.image { background-image: url('../images/image.png'); width: 32px; height: 32px; }
.icon.image-instagram-frame { background-image: url('../images/image-instagram-frame.png'); width: 32px; height: 32px; }
.icon.image-sunset { background-image: url('../images/image-sunset.png'); width: 32px; height: 32px; }
.icon.information { background-image: url('../images/information.png'); width: 32px; height: 32px; }
.icon.lock { background-image: url('../images/lock.png'); width: 32px; height: 32px; }
.icon.magnet { background-image: url('../images/magnet.png'); width: 32px; height: 32px; }
.icon.mail { background-image: url('../images/mail.png'); width: 32px; height: 32px; }
.icon.image-instagram { background-image: url('../images/image-instagram.png'); width: 32px; height: 32px; }
.icon.minus { background-image: url('../images/minus.png'); width: 32px; height: 32px; }
.icon.minus-circle { background-image: url('../images/minus-circle.png'); width: 32px; height: 32px; }
.icon.monitor { background-image: url('../images/monitor.png'); width: 32px; height: 32px; }
.icon.notebook { background-image: url('../images/notebook.png'); width: 32px; height: 32px; }
.icon.plus { background-image: url('../images/plus.png'); width: 32px; height: 32px; }
.icon.plus-circle { background-image: url('../images/plus-circle.png'); width: 32px; height: 32px; }
.icon.question { background-image: url('../images/question.png'); width: 32px; height: 32px; }

Both ways, any viewing of the page would have generated 16 HTTP-Requests (one for each image) for a total of ~ 25,5 kb, and a bigger usage of bandwidth than the Sprite Sheet solution, which I'm about to provide;
that's because four 50x50 images are bigger than just one 100x100 image.

Using sprites would be a way better solution - a technique which merges all icons into one single big image, using background-position to choose the one to be used.
Using this technique we can change the previous code as follows:

.sprite { background: url('sprite.png') no-repeat top left; }
.sprite.sprite-map { width: 32px; height: 32px; background-position: 0px 0px; }
.sprite.sprite-image { width: 32px; height: 32px; background-position: -32px 0px; }
.sprite.sprite-image-instagram-frame { width: 32px; height: 32px; background-position: 0px -32px; }
.sprite.sprite-image-sunset { width: 32px; height: 32px; background-position: -32px -32px; }
.sprite.sprite-information { width: 32px; height: 32px; background-position: -64px 0px; }
.sprite.sprite-lock { width: 32px; height: 32px; background-position: -64px -32px; }
.sprite.sprite-magnet { width: 32px; height: 32px; background-position: 0px -64px; }
.sprite.sprite-mail { width: 32px; height: 32px; background-position: -32px -64px; }
.sprite.sprite-image-instagram { width: 32px; height: 32px; background-position: -64px -64px; }
.sprite.sprite-minus { width: 32px; height: 32px; background-position: -96px 0px; }
.sprite.sprite-minus-circle { width: 32px; height: 32px; background-position: -96px -32px; }
.sprite.sprite-monitor { width: 32px; height: 32px; background-position: -96px -64px; }
.sprite.sprite-notebook { width: 32px; height: 32px; background-position: 0px -96px; }
.sprite.sprite-plus { width: 32px; height: 32px; background-position: -32px -96px; }
.sprite.sprite-plus-circle { width: 32px; height: 32px; background-position: -64px -96px; }
.sprite.sprite-question { width: 32px; height: 32px; background-position: -96px -96px; }

This process allows us to have one single HTTP-Request and the generated image is ~ 22,1 kb.

 

Further readings

 

Special Thanks

A special thanks to Yusuke Kamiyamane for his beautiful icons.