Speedysprite

Dynamically generate sprites from arbitrary image files

No setup is required to bundle your images into a single sprite. This means you can bundle images on the fly, not just static images like logos and buttons, but even dynamically assembled images like thumbnails on a search results page.

Examples

Entire Directory

To "spritify" an entire directory of images: (note the trailing "/"):

You'll of course need to fully qualify the URL if you host SpeedySprite as an externally, so instead of "/css/img-directory/" you'd write something like "http://myimagehost:9000/css/img-directory/". The host only needs to be specified once at the start of the URL.

Image Sprite

Specific Images

Anything without a trailing slash is interpreted as a literal image reference. Multiple images are separated by commas.

Image Sprite

Mixed

You can of course mix and match directories with specific images. Just start with "/css/" as always and continue with your comma separated image list. For example:

This creates a sprite from everything under application-icons in addition to the logo.png file. Note that directories are non-recursive.

F.A.Q.

What makes SpeedySprite any different from any other tool to create sprite images?

Unlike any other sprite tool before it, SpeedySprite lets you create ad hoc sprites dynamically from any images, and therefore operates as a service. Other tools require a static setup process that must be rerun every time new images are added or changed, and do not allow dynamically assembled collections of images to be made into sprites.

What is the advantage of packing my images into sprites?

Browsers like Firefox, IE, or Chrome ordinarily must issue separate requests for each image on your page. By packing your images into a single larger sprite image, you reduce the number of browser requests on a page, which translates to faster page loads and a better user experience.

How do I incorporate SpeedySprite into my larger web system?

Depending on your needs, you can either simply run SpeedySprite as a directly attached service, or you can proxy it behind a dedicated web server like Apache or Lighttpd.

How do I change this default page?

All routing is defined in the conf/routes file, which is a standard part of the Play! framework. It's quite flexible and intuitive, so you can adjust freely as needed.

Do I need to develop my application in Play! to take advantage of SpeedySprite?

Not at all, you can code your web app in any language or platform you like. SpeedySprite is a stand-alone http service that just happens to use Play! in its implementation, but this is not relevant for end users. SpeedySprite can be hosted anywhere that has access to the images being "spritified"

What image formats are supported?

Currently pngs and gifs. Others such as tiff and bmp may work too, but jpeg is not supported.

Since CSS doesn't support namespaces, how do you avoid filename clashes across different directories?

For brevity, SpeedySprite defaults to unqualified CSS class names, but if you uncomment the "cssDirPathSeperator" property in conf/application.conf then SpeedySprite will include the full path in the generated class names, using your chosen path separator in place of "/" (because slashes are not legal characters in CSS class names).

Is SpeedySprite free?

Yes it is open source software released under an Apache 2 license

Is SpeedySprite supported?

Like any open source project, no support is included, though support for SpeedySprite, along with almost anything else in your technology stack, may be separately purchased from NorthPoint. Having said this, we welcome patches and do aim to resolve all defects quickly.

Who developed SpeedySprite?

SpeedySprite was developed by NorthPoint, a web consultancy based in New York City that specializes in delivering full top-to-bottom technology solutions.