Tuesday, November 10, 2015

Generate Sprites with Sprity

CSS Sprites combins multiple images into a single image file for use on a website, to help with performance.

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


Note
sprity use file name as css class name, so better change all image files to lowercase. Below is a script to do this:
 for /f "tokens=*" %%a in ('dir C:\Projects\images /b/s/l') do (
    set f=%%a
    set f=!f:%%~dpa=!
    ren "%%a" "!f!"
)


If you are looking for online tool, try this url:
http://zerosprites.com/