问题
So im making a website and i showed it to a fellow web 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.
回答1:
There are services for that, called CDNs, content delivery networks. Some of the big sites have their own.
回答2:
- Use many domains for your images as browsers have limit (IE: 2) of outgoing connection to each domain.
- Use expiry headers to avoid multiple downloads of the same image.
- Generate thumbnails on the server (do not resize images in browser) to minimize required bandwidth.
- Invest in Akamai.
回答3:
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.
回答4:
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.
回答5:
You can also use nginx as a proxy server in front of the Apache server.
来源：https://stackoverflow.com/questions/5331877/how-to-handle-a-lot-of-images-in-a-webpage