Optimize the display of a large number of images (1000+) for better performance and ease of use in a web application

Question

In our web application, users need to view a large number of images. This is my current layout. At the same time 20 images will be displayed, and above the thumbnails - puzzling. Clicking on a thumbnail will show a larger image on the left. A larger image will follow the scroll bar so that it is always visible. Quite simple.

I was wondering what the best interface would be in this scenario:

One option is to implement an infinite scroll script that will lazy load thumbnails when the user scrolls. Invisible thumbnails will be removed from the DOM. But my concern with this approach is that the number of changes in the DOM slows down on the page.

Another option might be something like Google Fastflip .

What do you think is the best approach for this application? Sweeping ideas are welcomed.

Answer 1

I think the question you should ask is: what action should the user perform? What is the purpose of the site?

If “image browsing” entails evaluating each image, I would rather use the Fastflip approach, which focuses on a single image. The thumbnail gallery will be distracted from the desired action and may lead to fewer rated / viewed photos.

If the focus should rather be on comparing this image with others, I would say try the gallery approach, although I would not like to imitate an endless scroll with thumbnails, because the user can quickly get lost in an abundance of options, I think the standard pagination (whether static or ajaxified) would be better if you decide to go this route.

Just my 2c.

Answer 2

• If you break pages into thumbnails, you can first create one image containing all the thumbnails for each page, and then use the image map to process the cursor text and click. This will reduce the number of HTTP requests and possibly result in fewer bytes sent. The separation distance between images should be kept to a minimum so that this is most effective. This will have some disadvantages.

• To reduce the image loading size due to preprocessing, you can try to save each image in the format (PNG or JPG) the most effective for its content, using an algorithm similar to the ImageGuide algorithm. Similarly, if images are not compressed well (for example, JPEG from a cell phone’s camera), they can be recounted due to some quality.

• After there are several testers on the site, you can analyze templates in which images are usually clicked (if there is a template) and pre-load full-size images or even pre-load them all as soon as the thumbs are loaded.

• You can play with JPEG2000 images (you said “radical ideas welcomed”), which is very important because the thumbnail and the main image do not need to be sent as if they were separate files. This advantage of the compression format is not the same as hacking a message that the browser has resized a full-sized image to present its own thumbnail.

• You can look in Google WebP format.

• On the server side, a separate image server is optimized for delivering static content, possibly using NginX or the Tux web server.

Answer 3

I would show thumbnails, as the user could skip some of the images. I also avoid pagination in terms

<<first <previuos n of x next> last>> 

and go for something easier for implementation and efficiency. A

 load x more pictures. 

There is no endless scrolling, and why not, not even scrolling at all. Just load x more, previous x .

Answer 4

Although this answer may be a little unmanageable and boring, I would go with your suggestion of asynchronously loading thumbnails (and, of course, the main image) if they appear. A similar method is used by Google+ in the panel to add people to circles. Thus, you save server resources and bandwidth on the images that the client needs. According to Google+, operations with the DOM tree are quite fast and do not slow down the computer of past years.

You can also pre-create several rows of the thumbnail table in front with a dummy image (for example, a "loading circle" animated gif) and replace the image. Thus, the existing table is already built and does not need to be retransmitted, since the flow elements following the table would have to be if there were no images during scrolling.

Instead of breaking down into thumbnails (as suggested by your layout scheme), you can also think about letting users filter images by tag, subject, category, size, or in any other way to quickly find their results.