Preloading 20MB+ of images. Is it worth it to attempt this? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

开发者_如何学JAVA

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Improve this 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?

---

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.

---

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.

---

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

---

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.

---

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

---

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.