Introducing Shalam: An Open Source Tool for Simplifying CSS Sprites

CSS sprites are a common technique for minimizing HTTP requests for a website's images. While sprites can have a positive impact for your website itself, the tools for working with sprites can have the opposite effect on your website's developers. The tools haven't advanced much since their original introduction back in 2003. For example, there are few CSS spriting tools that support Retina assets, and even fewer that make it easy to include only the images that your site uses, all of which lead to wasted space, unnecessary HTTP requests, and frustration.

I'm excited to introduce Shalam, an open source tool we built in an effort to make CSS sprites more efficient. Instead of running a CSS spriting tool against a directory of images, Shalam takes the opposite approach and rewrites your CSS. This tight coupling makes CSS spriting far more straightforward, simpler, and minimizes the wasted space inside the sprite. It also enables us to support high-density screens at no extra cost.

Shalam also offers:

  • A basic layout engine: Shalam uses a simple layout engine to help minimize the dimensions of the generated sprite, decreasing overall file size.
  • Retina support: Shalam allows developers to specify the destination size of images on the page. That means that you can support high-density screens without needing to manually fiddle with sprite sheets.
  • Automatic downsampling: Shalam will automatically downsample the source image to the required size in the generated sprite. This ensures no bytes are wasted. Designers can provide high-resolution assets to engineers without worrying about the exact sizes they'll be used at.
  • Direct pull from Git: Shalam can be configured to pull your image assets directly from a Git repository. You'll never need to shuffle around ZIP files full of images from your design team ever again.
  • Support for IE8: Built-in support for generating IE8-friendly sprites, while still supporting features like high-density screens in modern browsers. Enterprise software companies can give all users a first-class experience.

We've been using Shalam internally for some time and we've found that it has significantly reduced the turnaround time for projects and increased internal productivity when collaborating with our design team. Learn more about Shalam here.

Tags: css, open source