Home

Welcome to the grunt-tight-sprite wiki!

This plugin is a grunt task harness for an efficient sprite packing implemented by tight-sprite engine, which uses well-known mathematically sound and fully documented algorithms.

Following documentation is available:

• Getting Started -- describes how to use the plugin.
• Workflow -- how to setup a sane workflow with grunt-tight-sprite, and why.
• FAQ -- you know what FAQ is :-)

All options are documented with multiple examples:

• options.absolute -- indicates to use an absolute path of a generated sprite image in CSS. Default: false.
• options.background -- specifies a color to be used as a background. Default: transparent.
• options.classPrefix -- prefix for generated CSS class names. Default: 'sprite_'.
• options.cssDest -- file name for a generated CSS file. Default: the same as dest, but with '.css' extension.
• options.includeExt -- include image file's extension in a generated CSS class name. Default: false.
• options.jpeg -- object, when specified it generates JPEG, or PNG when null. Default: null (PNG).
• options.includePath -- include image file's path in a generated CSS class name. Default: true.
• options.silent -- suppress all informational output to console. Default: false.
• options.template -- string template to generate individual entries corresponding to original source images in a sprite's CSS file.
• options.templateFile -- alternative way to specify a template as an external file. Default: none.
• options.templateParams -- a way to pass arbitrary parameters to a template. Default: {}.

Useful recipes how to improve your sprites even further:

• Best practices: CSS for sprites.
• Compress PNG with zopflipng.
• Compress JPEG with jpegtran.
• Compress to WebP.
• Serve WebP with nginx conditionally.
• Compress to JPEG XR.

If you have any questions, do not hesitate to email me. You can open issues for found bugs or enhancement ideas in Issues.

Happy sprite hunting!