The Future of the Web » CSS Sprite Generator » HTML, CSS, JavaScript and Ajax Expert Web Developer for Hire

CSS Sprite Generator
Sep 30 2007

Finally, there is an automated CSS Sprite Generator (via)! Just upload a zip of graphics and it will spit out a single image and a block of CSS you can use.

What are CSS Sprites? If you use a ton of CSS backgrounds for things like icons, buttons and other non-repeating graphics, then you can combine them into a single graphic and use background-position with width and height to show a slice of the larger graphic. This can make a site load faster since there are less files to download.

This is generally a pain to do by hand (not only combining the graphics, but calculating and remembering pixel positions), but with a tool like this it should be a cinch!
Tags: css links sprites
View 3 Comments | Add a comment
Comments

1. Elliott at 1:25pm on October 22, 2007

Hi

The sprite generator is a great idea. Sprites are the way foward, as you say it is fine making the images, but CSS can be a chore - I always find the sprite CSS rather counter intuitive.

Looking forward to trying it out.
2. buildcold at 5:55pm on December 7, 2007

hei;
it is very nice ,is it have desktop app version?
3. Stanislaw Osinski at 4:00pm on February 20, 2008

Hi!

Nice tool indeed! I've just released a tool that does the same thing, but using a different approach allowing greater flexibility and significantly reducing manual work. Only desktop version is available at the moment, if there is demand, I'll build a webapp too.

Download from:

http://smartsprites.osinski.name/

Add a Comment

Your Name Email (optional, used for Gravatar) Website (optional) Comment
Note: HTML tags and entities will be converted so that they are displayed as you type them. This means if you type in <em>, people will see <em>, and if you type <em>, people will see <em>.
What is six plus four? I want to be emailed when others add comments to this page.