Most of the bytes associated with a webpage are images.  A site that has a lot of small elements in separate files requires a lot of separate requests.  And for small elements, a significant portion of that traffic is overhead.

I have built a Windows application to combine images into a single file and output CSS to use it.

Some solutions in reducing overhead can help.  You can use a server that supports keep-alive or spread your static content across multiple domains to work around the maximum connections to a domain.  But my preference is to make every request count.

Tiling smaller images onto a single image is becoming a common solution.  It has given me pure CSS hover overs with no need to precache the hover states.  And subsequent pages load much quicker if I combine the smaller elements for the entire site.

After numerous manual efforts of combining images and pixel counting the offsets, I have created an application to do all the hard work for me.

Drag and drop files onto the app and it will stack them together.  Files with a “_over” suffix will automatically have Hover as the state.  It will store the new PNG, the generated CSS and an XML file to load it back in for updates.  The CSS class names will be the filenames.

Download: Executable (33 KB), C# Source Code (15 KB), .NET Framework 4 (Web Installer)