: Using one document for all images I have some icons around 100x100. I typically save out each icon as a .png but I wanted to know if I included all the .pngs in one document would it

@Speyer207

Reduce Server-Side Requests

You should always aim to reduce server-side requests as ultimately these will slow down page rendering.

Enable Parallel Downloading

You can further increase page rendering of your images using a simple CDN will also enable parallel downloading which will further decrease render times, never mind the benefits of cloneing your images all across the globe for increased response and download time.

PNG Sprites

So with this said it is best to use PNG Sprites, however you should also learn the limits of cache limits of mobile platforms. It really doesn't matter the resolution you use within a PNG sprite but what should be considered is the overall size of the file.

Cache Size Limits

As mentioned mobile platforms have cache limits, if your site is also targetting mobile browsers then you should take into account the following cache limits:


Android (Single File:2mb | Total Limit:2mb)
iPad Mobile Safari, iOS 3.2 (Single File:25kb | Total Limit:281kb)
iPhone 3GS Mobile Safari, iOS 4.0 (Single File:51kb | Total Limit:281kb)
iPhone 4 Mobile Safari, iOS 4.0 (Single File:102kb | Total Limit:1.9mb)
Palm Pre Plus, webOS 1.4.1 (Single File:1mb | Total Limit:1mb)


Single file is obviously what the device can cache in one file size, and the total is all file added up to together. Personally I limit sprites to 50kb but its completely up to you if you want to cater for newer phones or if you don't care about mobiles then ignore the limits.

Using Lossless Compression on PNG Sprites

You should also further increase page times by ensuring your spites are lossless compressed using something like PngCrush, or if your using MS Windows then you might prefer a GUI based compressor such as PngOptimizer.... or if you rather not install anything then why not true Yahoo's Smushit.

Vote Up Vote Down

@Sue5673885

In your case it depends on a few factors.


png bit depth used
colors used in icons (2 colors icons use less bytes than 16 million color images)
number of icons required
total number of requests needed on page. (if your site needs 100 requests then it makes sense to reduce it but if it needs 10 requests then NO)


In most cases creating image sprites will reduce the number of requests needed to load a web page which in turn lowers the load time. Although on the other hand as the file size increases the browser must take longer to download the larger image despite it possibly having free connection slots it could have used to download more resources in parallel. Browsers are built with a feature which allows them to download X number of resources on a web page in parallel. So in other words in some cases putting all your eggs (images) in one basket could hurt the user experience as they will wait longer. If your interested in what these numbers are see browserscope's network category on Max Connections.

You can test your web site using WebPageTest and analyze the waterfall chart it produces. Look at the images and how they download, look for slow problem ones. Try putting some in image sprites and then run a few more tests; you'll know immediately if your site befits from using the technique or not.

Also here's a really good online Image optimizing tool you can use on your images to compress them. The compression algorithm it uses is better then anything I've been able to get out of Photoshop.

Vote Up Vote Down

@Pierce454

Yes! Having all icons in one "sprite" image and using CSS to show the correct part of the image will reduce the page load time. This way the client only has to download one image and will save the overhead for the connection.

There's even a list of tools to do so here: Create sprites automatically

Vote Up Vote Down