0

I have a website centered around an online chat application where each user can have up to several hundred contacts. Each contact has there own profile image. I want to make it so that the contact's profile image is loaded next to there name. However, having the user download 100+ images every time they load the site seems intensive (Studies have shown that as much as 40% of users don't utilize there cache). Each image is around 60x60 pixels in dimension.

When I search on google or sign on to facebook, dozens of images are served nearly instantaneously. Beyond just having fast servers and a good connection, what are the optimal methods for delivering so many images to the user?

Possible approaches I have come up with are:

  • Storing each user's profile image in a database, constructing one image in a php file, than having the user download that, then using css to display each profile image. However, this seems extremely intense on the server and referencing such a large file so many times might take a toll on the user's browser.
  • Using nginx rather than apache to server the images (nginx generally works better to server static content such as this). However, this seems more like an optimization to a solution, rather than a solution in itself.

I am also aware that data can be delivered across persistent http connections so multiple requests do not have to be made to the server for multiple files. However, exactly how many files can be delivered across one persistent connection. Would this persistent model mean that just having the images load as separate files would not necessarily be a bad idea?

Any suggestions, solutions, and/or notes on personal experiences with relevant matters would be greatly appreciated. Scalability is extremely important here, as well as cross-browser support (IE7+, Opera, Firefox, Chrome, Safari)

EDIT: I AM NOT USING JQUERY.

user396404
  • 2,759
  • 7
  • 31
  • 42
  • 1
    Maybe you've already looked into stuff like this, but a common way to solve the "too much data returned at once" issue is pagination. Simply don't return all their contacts at once. For an example, look at how myspace and facebook list your friends. They're not all served up at once, and they have various sorting and searching features, because the user is really just looking at their contacts to find one, or a few people, or browse them slowly. The usage pattern doesn't really show a need to display all of them all the time. – Merlyn Morgan-Graham Oct 25 '10 at 01:14
  • That makes sense. However, on my page the contacts list is displayed with all the contacts at once for enhanced functionality. I can make it so the image only shows up when the chat screen is opened, but am curious if having them all load at once is a possibility. – user396404 Oct 25 '10 at 02:02
  • I think you would have to learn how the caching mechanism work on browsers to get all of those images to the users browser and keep it there. The problem with caching is mostly on the web site side sending cookies then the users browser. – Clutch Dec 17 '10 at 21:23
  • I recently came across this blog post that may be helpful: http://blog.teachstreet.com/homepage/how-to-use-amazon-s3-scaling-image-hosting/ – Eugene Osovetsky Oct 25 '10 at 01:51
  • Thank you for the informative blog post. Using an external host such as S3 might be a good option here. My site without the images has a very, very small file usage to user ratio. Being able to scale the images portion of the hosting separate from everything else would make things easier. – user396404 Oct 25 '10 at 02:06

1 Answers1

0

Here's a jquery plugin that delays loading images until they're actually needed (i.e., only loads images "above the fold".)

http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

An alternative may be to use Flash to display just the images. The advantage is Flash is a much stronger local cache that you have programm

Samuel Neff
  • 73,278
  • 17
  • 138
  • 182
  • I am not using jQuery. Flash definitely would be nice but it is something I want to avoid for greater compatibility. – user396404 Oct 25 '10 at 02:03