Reduce the HTTP Requests of 1000 images?

Question

I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:

Imagine you have 1000 thumbnail images on a single HTML page.

The image size is about 5-10 kb.

Is there a way to load all images in a single request? Somehow zip all images into a single file…

Or do you have any other suggestions in the subject?

Other options I already know of:

CSS sprites

Lazy load

Set Expire headers

Downloads images across different hostnames

Answer 1

There are only two other options I can think of given your situation:

1. Use the "data:" protocol and echo a base64 encoded version of your thumbnails directly into the HTML page. I would not recommend this since you cannot then cache those images on the users browser.
2. Use HTML5's Web Storage to store all the images as records with the base64 encoded image data stored as BLOBs in a column. Once the database has downloaded to the users machine, use Javascript to loop through all the records and create the thumbnails on the page dynamically using something like jQuery. With this option you would need to wait till the entire database was done downloading on the end users browser, and they will need a fairly modern browser.

I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.

If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.

Answer 2

This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.

See one tutorial at http://css-tricks.com/css-sprites