I have a site that must be rebuilt to be responsive. The new design will be close to the current design, and will use images in two different states for a vertical navigation menu. I can either use two larger images or 7 smaller images. In each case I would use css to reposition the image in the different stacked divs depending on which state is displayed. Rollover, active and clicked are the same.
Option 1: one larger image of all rollover states and one large image for all link state, using css to reposition the image in each of 7 divs.
Option 2: create a link and rollover state for each of 7 divs using 7 different images. Each image will have two states and be repositioned using css.
Which option would be the most efficient for site performance or would it matter? Here's a link to the current site: http://themaidplace.com