The web page has a requirement to display a large number of thumbnails on a page, in rows that fit the viewport. Images are set to a height of 160px. The image filenames come from a database, so a loop is used to create the <img> tag.
The images are displayed in a randomized order, handled by the query. There are currently about 2100 images, with more added each day.
The issue is how to optimize the loading of the images most efficiently. I realize it will take a while to load all of the images in the viewport, not to mention outside the viewport ('below the fold').
Assume that the thumbnail images are optimized as for filesize. Also, the number of images per row needs to adjust to the viewport width.
What is the best method to display such a large number of images on a page? And to 'prepare' for the images that will appear if the visitor scrolls the page?
Additional assumptions/requirements (added)
The requirement is that the number of items to display in a viewport depends on how many will 'fit'. So how to determine how many items (each say 150p x 300p width by height) will fit in the current viewport - to make the display of the items in the viewport area more 'efficient'.
That would require some computing by some JS on the client side. So some client-side code would have to change the img tag for the images in the viewport to make them visible, while using a lazy-load (?) to load/defer loading the images outside the viewport?
** Added **
The images are about 25-30K in side, all are jpg. The img tag specifies a height of 150px; the images are 100-150px height.
The code that displays the images loops through the list of available images, putting them all in one div, so they are displayed left-right/top-bottom. Images do not always load in that sequence, sometimes a few images in a 'row' will not load right after the one next to it.
So, I am looking for an efficient way to display the images in the viewport (first) and then display the rest as the viewport is scrolled. And the display and technique needs to be responsive for different size viewports.
