Click here to Skip to main content
Click here to Skip to main content

Tagged as

Image Sprites and CSS Classes creator

, 1 Feb 2011
Rate this:
Please Sign up or sign in to vote.
Image Sprites and CSS Classes creator

Image Sprites are a very good way to feed your application some images.
Basically, it consists of combining a set of images in a larger one and then just caching it.
When you need one of the small images, all you have to know are the coordinates of it on the large one.

With this technique, you just need to load one image for the entire application and reuse it, instead of loading each image at a time.

Here I'll be covering the implementation with CSS used on WebSites but you can use this technique wherever you want.

Why This?

Sure you can Google it and find a lot of matches telling you how to use sprites and CSS, but where's the "no pain" way of building them and their CSS?

All of them will tell you to use Photoshop or any other photo editing tool but this will always take a lot of time.

That's when this cute little application comes in.
It will generate the sprite image and its CSS in no time, and you can add images later and regenerate it without having to worry about breaking your code!

Using the Code

On the package, you'll find a compiled version and its source code.

Just drop the SpriteCreator.exe file on the folder that has the images to be included on the sprite and run it. DONE!

Assumptions and Limitations

  1. All images on the folder have the same size, e.g.: 16x16, 32x32, ...
  2. The size of the images will be the size of the first image loaded into the sprite.
  3. The big sprite image will always be square, having the minimum size needed to fit all images inside.
  4. All the images on the folder will be included on the sprite.
  5. Only jpg, jpeg, png & bmp extensions are supported.
  6. The name of the images is used on the CSS class name.
  7. The spaces on images file name will be replaced with -
  8. The result 2 files, one *.png and *.css where * is a generated GUID

Options

This is a console application so you can pass some customization arguments.

  1. /h :: Help
  2. /source :: Specify the images source directory path
  3. /destination :: Destination dir path
  4. /classprefix :: CSS class name prefix
Example: SpriteCreator.exe /source shadow /classprefix app-ui-

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AlexCode
Architect
Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.
 
Find more at on my blog.

Comments and Discussions

 
GeneralMy vote of 5 PinmvpDalek Dave16-Mar-11 6:49 
Short, sweet and useful.
Generalnice tool Pinmemberaldo hexosa1-Feb-11 17:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 1 Feb 2011
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid