Question

So, is it possible to create archive (/binary array?) ones on server side and then send it + run-time generated HTML page. I think it is. And wondering if there’s any libraries for that. Client side especially.

Core questions now are:
1. How to transfer image: as a js variable? Like var imagebinary = "3nmrnmfu5...."
2. How to turn image back from binary format and paste them where necessarily.

Now I’m thinking of using data: URL.

tomfumb suggested a brilliant solution that google uses: one “big” image that got caught into smaller pieces on client.

Answer 1

I think the technique you’re looking for often gets called “CSS Sprites”, and there are quite a few good articles on them around the place (just ask your favourite search engine). There are other methods using Javascript instead, but I quite like the CSS method myself.

There are quite a good articles at:

http://www.alistapart.com/articles/sprites

http://www.w3schools.com/css/css_image_sprites.asp

and many others.

The idea is to combine all the images into one larger image, then use CSS to control which parts of the larger image to display in any particular case.

Say you have four identical sized images, 1,2,3,4 (they don’t have to be identical size but
it makes the explanation easier

Combine them into one larger image using your favourite server side image toolkit. Something like GD from PHP, or ImageMagick, or PIL if you’re using Python. Most server side kits have a library that can combine images.

1234

Then create CSS rules that will display the relevant part of the bigger image on the client:

for example:

div.sprite {  height:100px; width:100px;  }
#image1 {  background: url(bigimg.png) 0 0; }
#image2 {  background: url(bigimg.png) -100px 0; width: 100px;}
#image3 {  background: url(bigimg.png) -200px 0; width: 100px;}
#image4 {  background: url(bigimg.png) -300px 0; width: 100px;}

and the HTML to display them:

<div id='image1' class='sprite'></div> 
<div id='image2' class='sprite'></div> 
<div id='image3' class='sprite'></div> 
<div id='image4' class='sprite'></div>

It’s the kind of thing it probably isn’t too difficult to automate.