Compress many files (images) for faster page load time

[Woppe]

I'm working on a project which requires hundreds of images to be sent from the server to the client. I've run some tests, and found out that some users experience much longer page load time than others. I tried a page with 8000 images, about 350 bytes each. It took 13 minutes 30 seconds to load it! That means a data transfer rate of 3.4 kB/s and we are for sure not using 56k any more... I guess short latency is important when transferring so many small files, and therefore people close to the server geographically experience shorter page load time than others.

 

My question is, do you have any idea how to speed this up? My first thought was tiling the picutres together at the server side, but it would be more convenient for me if there was any solution like letting the web server compress the files into an archive. Is that possible? Can gzip do that?

[PFMaBiSmAd]

It would help if you would tell us what you are trying to accomplish. Are you just trying to get the many files to the browser or are you trying to actually display them in the browser?

 

Each image displayed on a web page requires an <img src="url_of_one_image alt=""> tag and the browser fetches each url_of_one_image.

 

You could dynamically build one image from the many images files on the server using the GD functions.

 

If you were to zip/gzip the images and unzip them and then display them in the browser using javascript, the time to do the work in the browser would probably be close to the same time it is taking with individual images, but it might be worth a try.

[Woppe]

Actually, my main objective is to display the images in flash player.

The test I made with 8000 pictures in one page maybe was inaccurate. I noticed rendering 8000 img tags was heavy for the web browser, but in the end, that is not what I want to do.