Individual pages were created using a minimal, but valid HTML page with only the image(s) in the body content. Using the profiler feature of the Firebug add-in for Firefox, the time taken for the page (html+image(s)) to load completely were recorded. The shift+reload method was used to force a refresh, rather than using a cached image.
The files that were used:
| 2 images | 1 png | 1 jpg | |
|---|---|---|---|
| Test Times (in seconds) |
1.82 | 2.71 | 1.00 |
| 1.93 | 2.69 | 0.97 | |
| 1.88 | 2.77 | 0.97 | |
| 1.88 | 2.71 | 1.02 | |
| 1.88 | 2.72 | 1.00 | |
| 1.93 | 2.74 | 0.95 | |
| 2.00 | 2.82 | 1.05 | |
| 1.96 | 2.69 | 0.99 | |
| 1.89 | 2.75 | 1.04 | |
| 1.88 | 2.72 | 1.02 | |
| Average | 1.91 | 2.73 | 1.00 |
Having a single jpg image is clearly consistently quicker at loading. This was also confirmed when the relevant image(s) were swapped into the main demo file, with the whole page loading consistently fastest when the jpg image was used.
With the current use of frames, this is not really an issue, and similarly, further page loads would use the cached version. It does highlight however how one image may be quicker to load than several. (Hint: This applies to the box parts as well; see testboxes.html).
Shorter loading time on first hit, less data storage, fewer resources, fewer http calls, equivalent visual quality. To implement means changing one line of code where the logos appear (hopefully in a .asp header template). To simplify it even further, the <div id="logo"></div> could be left in place and actual displaying of the logo could be moved into the .css file. To change the image then, simply means changing the one .css file line.
None