How to handle A LOT of images in a webpage?

So im making a website and i showed it to a fellow we开发者_StackOverflow中文版b developer. I want to make my website a "visual experience" and every page will have at least 30 50x 50 thumbnails, a 120 x 100 image, and a couple more thumbnails. it will a a members only page so you can image, the more register users, we will have MUCH MUCH more images. in fact, each member can have his/her own photo album, which will be another set of images.

So he was really worried that my site would not be optimized and said that unless i invest in a REALLY REALLY expensive server, there is no way the images will load immediately. Users will have to wait seconds for images to load up.

So i was wondering is there any techniques to fix this? When i look at the src attribute of the images of websites like facebook.com ,it goes to places like http://profile.ak.fbcdn.net/hprofile-ak-snc4/27537_45309870078_2551_s.jpg. Is that some sort of technique to store the all the images on a different server/website?

So basically, im going to have a very image intensive website and i was wondering what is the best way to make sure the user experience is smooth as possible and not have users wait for individual images to load. Thanks.

There are services for that, called CDNs, content delivery networks. Some of the big sites have their own.

1. Use many domains for your images as browsers have limit (IE: 2) of outgoing connection to each domain.
2. Use expiry headers to avoid multiple downloads of the same image.
3. Generate thumbnails on the server (do not resize images in browser) to minimize required bandwidth.
4. Invest in Akamai.

Basically, the solution to that problem is to use a Content Delivery Network, like Akamai. Essentially, you're just caching the image for quicker access on a server not used for your processing requests.

Besides using a CDN, as the other answers suggested, also try to avoid or delay loading images that you don't need to load (yet). Example: Do a random Google Image Search and scroll through the results. See how the images are only loaded when you scroll down? YUI 2 seems to be a good option for that.

You can also use nginx as a proxy server in front of the Apache server.