Boxes are currently made up of two or three images for each box. This page compares the use of sprite images in achieving the same effect.
Individual pages were created using both methods of creating a n-type box and b-type box, and embedded CSS. 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:
| 5 images | 2 images | |
|---|---|---|
| Test Times (in seconds) |
1.25 | 0.81 |
| 1.24 | 0.80 | |
| 1.25 | 0.81 | |
| 1.21 | 0.80 | |
| 1.25 | 0.81 | |
| 1.24 | 0.78 | |
| 1.24 | 0.81 | |
| 1.24 | 0.80 | |
| 1.24 | 0.78 | |
| 1.25 | 0.80 | |
| Average | 1.24 | 0.80 |
Having a 2 larger images is clearly consistently quicker at loading than 5 images smaller images. The results will be slightly skewed as one of the images (bmid.gif) was recreated using CSS.
The boxes are used throughout the site, so any cutdown on download time and server load is welcomed. Further page loads would use the cached version of the box images. The same method could also be used for other types (x?) of boxes used for further benefits.
Shorter loading time on first hit, fewer resources, fewer http calls, equivalent visual quality. To implement means changing a few lines of CSS code where the box images are defined, and changing .menuitem code to recreate bmid.gif.
Need to check that tweaking .menuitem doesn't adversely affect layout of other items. Even if it doesn't, shouldn't be much work to fix.