FAQ

What kind of images are supported as sources?

GIF, PNG, and JPEG are supported. All other images should be recoded into that formats.

What kind of output formats are supported?

PNG or JPEG. See options.jpeg for more details.

Are animated images supported?

No.

Are (semi)transparent images supported?

Yes. Don't forget to set PNG as an output format. See options.jpeg for more details.

How to set a quality of a JPEG sprite?

See options.jpeg for more details.

Can I create a progressive JPEG?

Yes. See options.jpeg for more details.

Can I create a progressive PNG?

Not directly. You may want to use a post-processing for that.

Can I create SASS/LESS/Stylus file instead of CSS?

Yes. In fact any kind of text format is possible including JSON, XML, and, of course, a format of your favorite CSS preprocessor. See options.template and options.templateFile for more details.

You may want to specify an output file directly with options.cssDest using an appropriate extension, rather than rely on a default behavior, which always uses '.css'.

Generated sprites can be compressed better.

True. Canvas is bad at producing a well-compressed file. I always use a post-processing for that, and for other similar things, e.g., generating different browser-specific formats for sprites:

• to optimize PNG I run zopflipng to losslessly compress the result even further. See Recipe: compress PNG with zopflipng for more details.
• to optimize JPEG I use jpegtran, which is a part of standard tools available on Linux, and other platforms. See Recipe: compress JPEG with jpegtran for more details.
• to produce WebP, I generate PNG or JPEG, and convert it with cwebp, which is readily available on Linux, and other platforms. See Recipe: compress to WebP for more details.
  • you may want to serve WebP conditionally. See Recipe: serve WebP with nginx conditionally for more details.
• to produce JPEG XR, I suggest to generate a PNG file, and convert it with ImageMagick to JXR. See Recipe: compress to JPEG XR for more details.

How to serve WebP conditionally?

Right now our clients have a mix of browsers that support enhanced image formats like WebP, and some that don't. In order to be practical we should be able to serve images/sprites conditionally. It is clearly possible. See Recipe: serve WebP with nginx conditionally for more details.

I am missing some parameters for fine-tuning.

Use post-processing steps to alter the output. Good examples are Recipe: compress PNG with zopflipng and Recipe: compress JPEG with jpegtran.

Can I produce WebP or JPEG XR sprites?

Not directly. Produce a PNG or JPEG, and post-process it to your liking. See Recipe: compress to WebP and Recipe: compress to JPEG XR for more details.

Why do I have to use post-processing steps?

grunt-tight-sprite does one thing, and it does it well. In order to support a separation of concerns, it was decided to keep it short and sweet delegating to other specialized tools when possible.

How to run external commands as post-processing steps?

It is possible to run shell commands as a part of grunt process. Popular plugins for that are grunt-exec, and grunt-shell.

node-canvas (a dependency of this plugin) fails to install.

If it fails with this message:

flock: ./Release/linker.lock: Bad file descriptor

then according to https://github.com/TooTallNate/node-gyp/issues/147 you should simply issue a following command in your terminal before running install again:

export LINK=g++

What layout engine is used?

A special layout engine was designed for this project called tight-sprite.