Can I bundle images into one file for a web page?

Question

I have a web page with around 70 images. I am looking for a way to bundle these images into a resource file. This isn't to improve client side performance as caching etc will take care of this. It's more for asset management on the sever side via our cms - I'd like to be able to deploy a single resource into the cms rather than having to create 70 individual resources.

Are there JavaScript libraries that will let me bundle images?

Answer 1

It is easy to do that using Image Sprites and you need not use JavaScript. A Sprite is a single image file with a collection of images positioned in it at specific locations. I recommend to use a transparent PNG image with your images in it.

Below you can see transparent PNG sprites used by Google, Windows Live and Facebook.

Once the sprite is loaded in web page, it is easy to display images in another page since the browser normally caches images to improve page loading speed. You can display specific image in a sprite by defining it's specific location in the sprite using CSS, like;

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Finally, Spritebox is a handy tool to create your own custom image sprites.