Geek Answers Handbook

Reduce HTTP requests for 1000 images?

I know this question may seem a little crazy, but it’s hard for me that maybe someone can come up with a clever idea:

Imagine there are 1000 thumbnails on one HTML page.

Image size is about 5-10 kb.

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

Or do you have other suggestions in the subject?

Other options that I already know about:

CSS sprites

Lazy load

Set expiration headers

Download images by various hostnames

+6
image reduce request
source share
4 answers

There are only two other options that I can imagine, given your situation:

  • Use the "data:" protocol and echo the base64 version of your thumbnails directly into the HTML page. I would not recommend this, since you cannot cache these images in the users browser.
  • Use HTML5 Web Storage to store all images as records with base64 encoded data stored as a BLOB in a column. Once the database has loaded onto the user's computer, use Javascript to view all the entries and create thumbnails on the page using jQuery. With this option, you will need to wait until the entire database is loaded in the end-user’s browser and they need a fairly modern browser.

I think your best bet is a combination of lazy loading, expiration header caching, and serving images from multiple host names.

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

+5
source

This is done using what is called a CSS sprite; one image with all other images inside it, with the part that is needed in the html selected by css.

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

+2
source

It sounds like you need something like SPDY server push . When a client requests an HTML page (or first image), SPDY allows the server to click other resources without waiting for more requests.

Of course, this is still experimental.

0
source

You can try the montage imagemagick command to create a single image.

0
source

More articles:


All Articles