Designing minimaps: the more efficient way to do it

Question

Am am making a wap-game that will have a minimap. It is basically a 5x5 div with (a) 20x20 pixel background image(s).

I've come to a stalemate trying to figure out on how to design them, though.

Making a 100x100 pixel image for each 'location' wouldn't be a good idea, since if one of those 20x20 locations changed, I would have to update 15 100x100 images.

Two choices are left then:

• Combining the 20x20 pixel images to a big 100x100 pixel one using GD
• Giving each div in the minimap a background with the 20x20 location image.

In the second scenario a lot of HTTP requests would me made to fetch the images, in the first, server resources would be used to combine them to a big image.

Which of the options do you think would be a more efficient one? Basically I see it as a lose-lose situation, but one has to decide which loss is less painful.

Answer 1

Why don't you check out CSS SPRITES?

http://spriteme.org/

Then you can generate the map with a php function that select the CSS class (with its relative background) randomly.

If you have let's say 9 different parts of map 20x20, to be combined in a 3x3 grid, you just have to create a class for each piece of map. You can generate it dinamically (replace 0px 0px with a "$x = rand(0,3)*20; $y = rand = rand(0,3)*20;" or so.

.map1 {
    background-image:url(/images/css_sprite.png);
    background-position:0px 0px;
    background-size:20px 20px;
}

1 HTTP request to be called, and no server resources to be wasted in GD!