If you're using Grunt, Gulp, or Node in general, Sprity is a wonderful node package that creates sprites from a glob of images. Sprity has a lot of great features including formatting output as PNG, JPG (or Data URIs of those), and stylesheet generation in CSS, LESS, Sass, and Stylus.
node.js
Install node.js first if your system don't have one.
sprity
To compile sprites via command line, install sprity globally with:
> npm install sprity -g
sprity command line
Then install command line interface for sprity
> npm install sprity-cli -g
creat command
Usage:
sprity create <out> <src>... [options]
sprity create . C:\Projects\images\*.* -s C:\Projects\css\sprite.css
This will combine all images under C:\Projects\images, and create image sprite to current folder and also write css to sprite.css.
Options
out path of directory to write sprite file to
src glob strings to find source images to put into the sprite
Options:
-b, --base64 create css with base64 encoded sprite (css file will be written to
-c, --css-image-path http path to images on the web server (relative to css path or absolute path) [../images]
-f, --format output format of the sprite (png or jpg) [png]
-n, --name name of sprite file without file extension [sprite]
-p, --processor output format of the css. one of css, less, sass, scss or stylus [css]
-t, --template output template file, overrides processor option
-r, --retina generate both retina and standard sprites. src images have to be in retina resolution
-s, --style file to write css to, if omitted no css is written
-w, --watch continuously create sprite
--background background color of the sprite in hex [#FFFFFF]
--cachebuster appends a "cache buster" to the background image in the form "?<...>" (random) [false]
--margin margin in px between tiles [4]
--interpolation Interpolation algorithm used when scaling retina images (nearest-neighbor|moving-average|linear|grid|cubic|lanczos)
--opacity background opacity of the sprite. defaults to 0 when png or 100 when jpg [0]
--orientation orientation of the sprite image (vertical|horizontal|binary-tree) [vertical]
--prefix prefix for the class name used in css (without .)
--no-sort disable sorting of layout
set f=%%a
set f=!f:%%~dpa=!
ren "%%a" "!f!"
)