CODEWITHSUNDEEP
optimizationimage-processing
Ben
Ben

Reputation: 1535

How to handle A LOT of images in a webpage?

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.

Upvotes: 0

Views: 1780

Answers (5)

Ando
Ando

Reputation: 1847

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

Upvotes: 0

PaoloVictor
PaoloVictor

Reputation: 1306

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.

Upvotes: 0

Tejs
Tejs

Reputation: 41256

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.

Upvotes: 1

Mat
Mat

Reputation: 206869

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

Upvotes: 3

Jakub Konecki
Jakub Konecki

Reputation: 46018

  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.

Upvotes: 2

Related Questions