2

I'm developing a photography portfolio website. I want to know what would the best practice be for downloading images from a database. As of right now the entire gallery is roughly 20MB. The gallery is still in development, I intended on just having an "loading" graphic run between photos. But the client seems to prefer image preloading. Is it practical to have the page preload 20MB+ of photos, and if so, what is the best way to do so? Or would it be best to go with the loading screen?

DavidR
  • 5,350
  • 6
  • 30
  • 36
  • "Or would it be best to go with the loading screen?"? What does this mean? – S.Lott Jul 29 '11 at 15:39
  • If your client wants preload I would say that a loading screen would be a good idea rather than just letting the browser hang as it preloads in the background. – Joseph Marikle Jul 29 '11 at 15:50
  • @Kragen gives a very good reason why you shouldn't do this, although if your client insists, and you can't change their mind, then you should place a disclaimer notice, perhaps on a splash page, informing all visitors that accessing the site will cost them 20MB credit. I used to use a mobile connection myself and actively avoided pages and sites which had autoplaying video, music and buffered image caches. – stephenmurdoch Jul 29 '11 at 15:56

6 Answers6

4

Why not "thumbnailing" images via some server side script, preload thumbnails & display full image on thumbnail click (using some kind of lightbox js) This would reduce a lot preloading time while keeping full porfolio preview.

dweeves
  • 5,525
  • 22
  • 28
4

20MB to fetch in one go is too much, it will result in a slow and annoying user experience. You should probably ajax-load each image in turn.

Incidently, how big are your images? An 800 x 600 jpeg should be around 50k at 90 - 95% quality. So 20 MB would be 400 images. This seems like a lot for one page. I'm guessing your image sizes are large - consider reducing them. If you want to have hi-res, non-compressed versions available, have these individually linked.

Edit: Just for reference, what I would consider a very large page (the html doc + all css, js and image assets) would be ~ 1MB. An "average" sized page is probably ~ 100k.

Richard H
  • 38,037
  • 37
  • 111
  • 138
  • This would explain some things. The images he sent me were 800x600, but 200-700kb. I compressed them and that brought the size down a lot. – DavidR Jul 29 '11 at 16:28
2

I think the better way is to preload the next couple of photos while you are viewing the current one

Jeremy
  • 4,797
  • 1
  • 18
  • 26
2

Yeah, definitely don't do this. Rememebr that some users will be connecting with mobile connections and some of them paying by the megabyte - if you do this then you've just used up 20 MB of their allowance with images that they may never see.

Justin
  • 84,773
  • 49
  • 224
  • 367
0

I don't think either solution is practical - I would suggest you scale down your images.

Barry Kaye
  • 7,682
  • 6
  • 42
  • 64
0

20MB is probably too much unless it is a specialized application where you are confident that 1) users will wait and 2) that they will view the majority of those images. Otherwise, you are wasting bandwidth.

I would look at a strategy where your images are cached in server memory to avoid database traffic combined with client-side pre-caching of a few images where you can add it. For example, if the user is on image "A", load "B" and "C" as well.

Tim M.
  • 53,671
  • 14
  • 120
  • 163