The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menus in CSS

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33819

    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.

    Not sure how one can find that out.


    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?


    That is what I was thinking. And I would hope the browser developers would plan for this type of thing. I will have to give that test ago once I get some free time as I have to have proof.


    its one resource – one call

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.