Load 1000 images smartly

Question

I have like 1000 images on the same page. Unfortunately, I can\'t use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 HTTP

Answer 1

Very few use cases support serving hundreds or thousands of images on a single page. One such case is Google Images. This is how to do it right:

https://www.google.com/search?tbm=isch&q=jeff+atwood

1. Lazy load images This is a requirement. If the images are below the fold (outside the visible document area) there's no reason to load them.

2. Use pagination Google Images breaks up results into pages where only a handful of images are loaded at the time. Google also uses some JavaScript-fu to implement an infinite scroll - once the browser gets close to the bottom of the current results, it sends a request to load more result pages and injects them at the bottom of the page.

3. SEO: No JavaScript, No Problem Visit the Google Images link again, but with JavaScript turned off. You can still browse through the results pages - there's about 15 images per page. Search engines can index this image content.

4. Maximum Image Display Once more than 150+ images are being displayed put a button at the bottom of the page to "Load More Results" - this button reloads the entire page, but starts at the 151st image instead of the 1st. Every image the browser has to draw takes up more memory & CPU cycles. Scrolling a long list can quickly bring a mobile browser or modest desktop to crawl.

Loading thousands of images is bad - it will tax your server to ruing the user experience. This is true of any large data set that a user wants to browse.