Skip to content

Top 5 online CSS sprite generators

Sprite is a two dimensional image that is integrated in larger scene (says Wikipedia). Websites of today use a lot of graphics to represent its design and layout. That usually is not a problem on broadband internet, but when you need to save every microsecond, it really is great to use CSS sprites.

CSS sprites are a way to reduce the number of requests made for images referenced by your site. Great example is menus with lots of icons, every small icon has its on, off state. Basically, you combine all this icons in one larger image, and, by using CSS, use it on elements by setting X and Y coordinates on the image. This way, you do not download 50 image (50 HTTP requests) but 1 image and thus save time.

To make such images can be time consuming, so I found top 5 online CSS sprite generators. I know that there are many more, but this is enough for everyone to start using this great technique with little effort.

CSS Sprite Generator

CSS Sprite generator

CSS Sprites Generator

CSS Sprites Generator

CSS Sprites

CSS Sprites

SmartSprites

Smart Sprites

Website performance – CSS sprite generator

Website performance - CSS sprites generator

As I said, this is a small list, but if you want to build your own CSS Sprite generator, you can use this code .

Using CSS Sprites is now much easier even for non experienced web designers. This generators are great, they even generate CSS classes and some of them are really state of the art.

Tags:

4 thoughts on “Top 5 online CSS sprite generators”

  2. Zoran Jambor

    Anyone actually uses any of these generators? What are pros and cons?

    Is the control given by generator enough?

    I create sprites in Photoshop; it’s quite time consuming.

    1. Zvonko

      @zoran Thanks for the comment.

      Pros of using a generator is time, it takes a couple of seconds to generate a sprite (after you prepare the images).

      The only problem I see is that you can not use repetitive images. Other problem is when you need to change one image inside sprite, you have to change a lot of CSS .

Comments are closed.