Lightening load times with image concatenation

View blog reactions Written on April 27, 2007 by Chris Heald

BorkWeb has a good article about a relatively old and yet, underused image technique. It’s a good read, and certainly worth implementing where possible. I tend to use this technique with image rollovers, since you have “sets” of images that belong together.

It’s worth noting that this technique is very similar to sprite sheets used in most 2D games, and UV-mapped texture maps used in 3D games. Rather than creating a separate resource for each frame of your sprite, or for each portion of a model you want to texture, you create one single resource for all the frames/textures, load it a single time, and then display portions of it as necessary. The benefits are the same in games and on the web - fewer resources to load means faster load times, and it’s cheaper to display two parts of one image than it is to display one part of two images.

Posted in CSS