Question

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?

Answer 1

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.