Create CSS Sprites With A Simple App 1


Create CSS Sprites With A Simple App


Today I am going to review an application which will be of interest to any one who has anything to do with web development, particularly CSS and HTML. One of the best ways to speed up the loading of a website is to put every image used in the CSS file into one large image. This means when your website loads, it doesn’t have to ask for many small images. It only asks for one large image (called a sprite) this improves loading times. For the new users generating a CSS sprite, where there is one large image that contains all of the images you are going to use can be difficult, if not confusing. Today’s app, Sprite Master Web, is a tool which you can use to generate your own CSS sprite on your Mac.

When I created my CSS sprite for this site, I spent a long time reading various tutorials on the web and a good portion of a weekend generating an image in Photoshop. Today’s app, takes all of the pain out generating this image and allows you to do it quickly and simply and for $3.99, its a little tool that is worth the small price tag.

Once you have opened the app, you import the images you want to use. This could be a couple of images, or a multitude of site wide number of images, if they have been referenced in your CSS file, they can be used in a CSS sprite (the exception is repeating image which can be a bit tricky). When you have decided the images you want to use, you have a couple of options regarding the layout of the images and the size of the image, you select these options in the sidebar. The app is smart enough to figure out when there are overlaps or the images will not fit.

A CSS sprite being generated from various seperate images.

After you have played around with the sprite on the screen you can now export the image and build the CSS file. Since the app is all about simplicity, you select the export button, enter a save location and the app will generate an image file and a CSS file with all of the coordinate information. You can now upload this sprite to your web server and incorporate the coordinate information into your CSS file.


Overall the app is really simple to use. If you want a basic app to build you a sprite this is the tool for the job. The resulting sprite should speed up your website, integrating the CSS rules to reference the image is simple due to the generated file.

It does have some limitations that I do find slightly annoying. For example you can’t move images around on the canvas, and you can’t save images out as a jpg. Slight problems, but not over all detracting from the app.

I liked the app, i’ll definitely be using it if I have any graphics that need converting into a sprite. If you have any questions or comments, please leave a comment below. Meanwhile you can download it on the app store.

If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips