Full of lovely web standards information and a large helping of PHP

CSS Sprite Generator Web Tool

10 months, 27 days ago

Stuart and I have just finished developing our CSS Sprite generator. Upload a ZIP files containing individual images and it will return a combined image and all the CSS background-position rules required to display each component image. It accepts and can generate PNG, GIF and JPEGs and provides a range of options allowing you to tailor the output image and CSS to your site.

It also has full localisation support and thanks to some colleagues at work who have offered to provide translations the interface will soon be available in French, German and Portuguese as well as English.

For those that don't know what CSS sprites are or the performance benefits they provide we've included a help page within the tool which provides a brief introduction.

It is the first of many tools we'll be releasing to support a book we're writing on web site performance which will be published by Apress sometime in early 2008.

We'd love to hear what you think of the tool and any suggestions you have for improvements. You can email us at contact@website-performance.org.

Check out the tool

Comments

  • Is the code available?

    Jeremy Dunck - 28th September 2007

  • Not yet but we're considering it - stayed tuned.

    Ed Eliot - 28th September 2007

  • -- Can your CSS also generate the hieght and width of the images like this:

    .btn_hover-gif{ background: url(../images/app_sprite01.gif) -180px -440px no-repeat; height:30px; width:176px;}

    Thanks

    chris - 18th December 2007

  • The code is available now an a bunch of other nice things as well. :)

    Jonathan Cross - 28th May 2008

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index