Ok, I have fell in love with combining all my menu buttons and states into one image and then using background-position for each anchor element to move the image around to the correct button view. Of course adding the :hover as well to have it switch states. This allowed me to take 8+ images for a total of 77KB down to 1 image for a total of 22KB. I love the consolidation and the faster load times but I do have a concern. If I am loading the 22KB file in all the anchor tags (background image) would that cause the users’ browser to load that 22KB file (with 5 buttons) 5 times taking up more memory / RAM on the visitor’s computer? So instead of it being say 77KB total it is now 110KB running in memory for just that one menu.
Most browsers appear to treat at as one resource throughout code, so no additional memory overhead – but I cannot back that up with any proof;
Chrome has a task manager that can show memory usage (‘Shift’ + ‘Esc’ fin Win users).
Maybe mock-up a page with some 5mb images and refer to them in the code 10-20 times, then check the browser memory usage?