Click here to Skip to main content
12,621,296 members (31,323 online)
Click here to Skip to main content
Add your own
alternative version

Stats

52.8K views
2.5K downloads
58 bookmarked
Posted

Image Sprites and CSS Classes Creator

, 17 Feb 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Create image sprites and its CSS classes on the fly

Although no one actually complained about it, I'm adding a download option without the compiled executable for those who may have trouble with the AntiVirus or other security policies

New v2.0  

I  decided to increment the major version of this tool as it implements new core features and actually brakes background compatibility with the previous command line commands.

So... what's new?

  • 3 Bin Packing algorithms to choose from that optimize the sprite image size
  • New and refactored command line commands to let you automate the generation process
  • Support for inner folders
  • Allow setting the output file names

Introduction  

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 of 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, Limitations and Functionality

  • All image files on the folder will be added to the sprite no matter the size.
  • All the images on the folder will be included on the sprite.  
  • Only jpg, jpeg, png & bmp extensions are supported.
  • The name of the images is used on the CSS class name.
  • The spaces on images file name will be replaced with -
  • The result 3 files, one *.png (the sprite), *.css and *.html (the demo usage page) where * is the name you specified or a random GUID. 
  • CSS file includes a class that applies the background image to the element
  • Images are ordered using 3 different algorithms (more about them bellow).

Bin Packing Algorithms

To optimize the distribution of the images on the sprite I used the code from here:  Nuclex Game 

 The Bin packing algorithms are very well documented on their page.

All Bin Packing Algorithm credits must be given to these guys that saved me a lot of time by perfectly implementing these three good bin packing algorithms in C#. On my side I only removed the XNA dependencies and replaced them by pure System.Drawing objects.

Options 

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

  1. /h, /?, /help :: Help 
  2. /s :: Specify the images source directory path
  3. /d :: Destination dir path 
  4. /D :: Same as /d but creates the directory if it doesn't exist
  5. /f :: Destination file name 
  6. /F :: Same as /f but overrides the files if they already exist
  7. /cp :: CSS class name prefix
  8. /pl :: Specify the Bin Packaging Level (1, 2 (default) or 3)

Ex: SpriteCreator.exe /s Images /F SiteImages /cp "app-ui-"

History 

  • v1.0 - The very beginning 
  • v1.1 - Support for images of different sizes and small improvements. 
  • v2.0 - Arguments refactoring and Bin Packing Algorithm usage. 

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.

You may also be interested in...

Comments and Discussions

 
QuestionRe my vote of 5 Pin
Bill Hardwick5-Sep-15 5:32
memberBill Hardwick5-Sep-15 5:32 
AnswerRe: Re my vote of 5 Pin
AlexCode5-Sep-15 14:42
professionalAlexCode5-Sep-15 14:42 
QuestionPerfect except for not being able to specify the sprite class name Pin
PatrickDaniel5-Dec-13 9:40
memberPatrickDaniel5-Dec-13 9:40 
AnswerRe: Perfect except for not being able to specify the sprite class name Pin
AlexCode5-Dec-13 22:00
professionalAlexCode5-Dec-13 22:00 
GeneralMy vote of 5 Pin
Kornel Regius26-Sep-13 11:06
memberKornel Regius26-Sep-13 11:06 
GeneralRe: My vote of 5 Pin
Kornel Regius6-Oct-13 0:34
memberKornel Regius6-Oct-13 0:34 
GeneralRe: My vote of 5 Pin
AlexCode7-Oct-13 8:15
professionalAlexCode7-Oct-13 8:15 
GeneralMy vote of 5 Pin
Prasad Khandekar31-Jul-13 3:15
professionalPrasad Khandekar31-Jul-13 3:15 
QuestionMy vote of 5 Pin
babydragoner2-Jul-13 0:04
memberbabydragoner2-Jul-13 0:04 
GeneralMy vote of 5 Pin
Xabring25-Feb-13 9:05
memberXabring25-Feb-13 9:05 
GeneralMy vote of 5 Pin
Industria Virtual23-Oct-12 13:17
memberIndustria Virtual23-Oct-12 13:17 
GeneralRe: My vote of 5 Pin
AlexCode23-Oct-12 22:06
memberAlexCode23-Oct-12 22:06 
GeneralGreat tool Pin
BeeWayDev18-Oct-12 3:44
memberBeeWayDev18-Oct-12 3:44 
GeneralRe: Great tool Pin
AlexCode18-Oct-12 5:21
memberAlexCode18-Oct-12 5:21 
Generalgood job Pin
windtear18-Oct-12 1:32
memberwindtear18-Oct-12 1:32 
GeneralRe: good job Pin
AlexCode18-Oct-12 2:31
memberAlexCode18-Oct-12 2:31 
GeneralMy vote of 5 Pin
Frederico Barbosa17-Oct-12 23:58
memberFrederico Barbosa17-Oct-12 23:58 
GeneralRe: My vote of 5 Pin
AlexCode18-Oct-12 0:12
memberAlexCode18-Oct-12 0:12 
BugImages overlapping Pin
David Latimer12-Oct-12 9:45
memberDavid Latimer12-Oct-12 9:45 
GeneralRe: Images overlapping Pin
AlexCode14-Oct-12 3:35
memberAlexCode14-Oct-12 3:35 
GeneralRe: Images overlapping Pin
David Latimer15-Oct-12 8:41
memberDavid Latimer15-Oct-12 8:41 
GeneralRe: Images overlapping Pin
AlexCode17-Oct-12 21:16
memberAlexCode17-Oct-12 21:16 
GeneralMy vote of 5 Pin
Bernd Degen26-Sep-12 3:02
memberBernd Degen26-Sep-12 3:02 
QuestionThank you Pin
Bernd Degen25-Sep-12 22:35
memberBernd Degen25-Sep-12 22:35 
AnswerRe: Thank you Pin
AlexCode25-Sep-12 23:28
memberAlexCode25-Sep-12 23:28 
GeneralRe: Thank you Pin
Bernd Degen25-Sep-12 23:43
memberBernd Degen25-Sep-12 23:43 
GeneralRe: Thank you Pin
AlexCode26-Sep-12 3:13
memberAlexCode26-Sep-12 3:13 
QuestionIts nearly perfect to me Pin
poLedu30-Aug-11 6:23
memberpoLedu30-Aug-11 6:23 
AnswerRe: Its nearly perfect to me Pin
AlexCode30-Aug-11 9:06
memberAlexCode30-Aug-11 9:06 
GeneralRe: Its nearly perfect to me [modified] Pin
poLedu31-Aug-11 6:18
memberpoLedu31-Aug-11 6:18 
AnswerRe: Its nearly perfect to me Pin
AlexCode30-Aug-11 9:09
memberAlexCode30-Aug-11 9:09 
GeneralIgnore my old message because this software does not work correctly at all Pin
PokemonCraft18-Apr-11 10:48
memberPokemonCraft18-Apr-11 10:48 
GeneralRe: Ignore my old message because this software does not work correctly at all Pin
AlexCode1-Jul-11 6:46
memberAlexCode1-Jul-11 6:46 
GeneralRe: Ignore my old message because this software does not work correctly at all Pin
AlexCode25-Sep-12 21:21
memberAlexCode25-Sep-12 21:21 
Generali vote 10/10 Pin
PokemonCraft18-Apr-11 2:11
memberPokemonCraft18-Apr-11 2:11 
GeneralRe: i vote 10/10 Pin
AlexCode18-Apr-11 2:18
memberAlexCode18-Apr-11 2:18 
GeneralRe: i vote 10/10 Pin
PokemonCraft18-Apr-11 9:41
memberPokemonCraft18-Apr-11 9:41 
GeneralRe: i vote 10/10 Pin
PokemonCraft18-Apr-11 9:52
memberPokemonCraft18-Apr-11 9:52 
GeneralRe: i vote 10/10 Pin
AlexCode1-Jul-11 6:50
memberAlexCode1-Jul-11 6:50 
GeneralMy vote of 5 Pin
John Kasra9-Feb-11 11:10
memberJohn Kasra9-Feb-11 11:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.161128.1 | Last Updated 18 Feb 2013
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid