Spritesmith is a Node.js utility for programmatically generating spritesheets and corresponding coordinate maps from individual image files. It provides a robust solution for optimizing web assets by combining multiple small images into a single larger image, reducing HTTP requests and improving load times. The current stable version is 3.5.1, and while there isn't a fixed release cadence, major versions introduce significant API changes and improvements, as seen with versions 2.0.0 and 3.0.0. A key differentiator is its pluggable engine architecture, allowing users to switch between various image processing backends like `pixelsmith` (default Node.js-based), `gmsmith`, or `canvassmith` to suit performance or format requirements. It also offers flexible output formats for coordinate data, making it adaptable for integration with various CSS preprocessors and build tools such as Grunt and Gulp via dedicated plugins, and even Webpack.
npm install spritesmithVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to generate a spritesheet from a list of image paths and save the resulting image and coordinate data to disk. It uses the `Spritesmith.run` helper function for a simplified API call.
Access image data as a Buffer directly. If a string is needed, use `result.image.toString('base64')` or `result.image.toString('binary')` as appropriate, or `fs.writeFileSync('output.png', result.image)` for file operations.Update your custom engine package: `npm install your-engine-smith@latest --save-dev`.
For the simpler, non-streaming API, replace `spritesmith(...)` with `Spritesmith.run(...)`. For streaming, instantiate `new Spritesmith()` and use its instance methods.
Check the documentation for your chosen engine for installation requirements. For `gmsmith`, this typically means installing GraphicsMagick or ImageMagick system-wide. Ensure the engine package itself is installed via npm.
Carefully configure `imgPath` to reflect the web-accessible URL for the spritesheet relative to your CSS, not necessarily its local file path. Ensure it matches the asset pipeline's final image URL.
Use `Spritesmith.run()` for the legacy function-like behavior, or `new Spritesmith()` for the streaming API. Example: `const Spritesmith = require('spritesmith'); Spritesmith.run(...)`Install the required native image processing library (e.g., GraphicsMagick) and ensure the corresponding npm package for the engine (e.g., `npm install gmsmith`) is installed in your project.
If `result.image` is a Buffer, use `fs.writeFileSync()` or convert it to a stream (e.g., using `stream.Readable.from()`) if a stream is genuinely required. In `gulp.spritesmith` v6.0.0+, if Vinyl files have stream contents, use `vinyl-buffer` to convert streams to buffers if your pipeline expects buffers.
No dependency data recorded yet.