Loading thousands of small images onto a webpage

Question

I'm building a thumbnail viewer for my photograph archive, and need to load thousands of photos onto a single webpage. The thumbnail images have already been downsampled from the original photo JPG via ImageMagick + MozJPEG, all fit within 100x100px, and are 1-3 KB each.

Chrome, for instance, can handle a page with 2500+ images no problem. The slow part is requesting the images, i.e., handling 2500+ HTTP requests. Does HTTP/2.0 provide additional options for streamlining requests like these?

I'd like to avoid creating chunked mosaic images that I then sprite into the webpage (I need to be able to see the filename for each image), but that's the best workaround I can think of at the moment.

_"need to load thousands of photos onto a single webpage"_ - no, you don't. Create that large image serverside and map each section to a specific URI. — CodeCaster, Feb 03 '16 at 15:46
@Ryan89 If his images are that small he could quite conceivably have 50 - 100 just on a single screen, which though it isn't always an unreasonable amount is still a high number of requests for no real reason. — Michael, Feb 03 '16 at 15:54
A large number of requests is not as much of a problem in HTTP/2 as in HTTP/1.1, thanks to header compression. That said, if you want to avoid the request entirely use HTTP/2 PUSH and let the server stream all the 2500 images. Give a try to [h2o](https://h2o.examp1e.net/), or (brazen promotion), use [ShimmerCat](https://www.shimmercat.com) (we are looking for extreme cases like yours to tune-up things). — dsign, Feb 03 '16 at 16:27
@Ryan89 yes, I considered lazy-loading, but I'm trying to avoid using Javascript on the client-side where possible. And it's a sub-optimal solution, since my browser can handle showing all the images at once (just not requesting all of them at once). — chbrown, Feb 03 '16 at 16:43
@CodeCaster, OK, OK, that's what I _want_, whereas all I _need_ is "to be able to see the filename for each image" :). However, generating the large image and mapping "each section to a specific URI" (by which I assume you mean sprites) requires extra work that I'm trying to avoid. — chbrown, Feb 03 '16 at 16:49
As you have ImageMagick installed, you can easily make a montage of images automagically putting a table underneath each one... http://stackoverflow.com/a/30957183/2836621 and http://stackoverflow.com/a/28451043/2836621 — Mark Setchell, Feb 03 '16 at 17:01
No, I mean an image map. One large image, multiple URIs. You can map each section of the larger image to a specific URI. It is work you _have_ to do (and you can let code do that work for you), making 2500 HTTP requests for one page will _not_ be appreciated by your users (even if that user is just you). — CodeCaster, Feb 03 '16 at 17:01
I would have though if each image is the same size 100x100 you could generate an imagemap automatically with something like php. You could use glob() to read all the image names into an array. Then use Imagemagick to create your large image and php to create the imagemap and URL combination. This has the benefit of easy updating If you add or remove images. — Bonzo, Feb 03 '16 at 20:23

score 1 · Answer 1 · answered Feb 09 '16 at 09:10

HTTP/2 will make many more parallel transfers than the comparable HTTP/1 approach (typically at least 100 in parallel, many times more than that). And each outgoing request will be smaller to send due to compression.

With HTTP/1, browsers typicality stick to 6 connections per host name and pipelining is usually not enabled, which makes clients wait for the response before it can send the next request. So if you use a lot of host names to distribute the pictures over, you can get many parallel transfers but that'll use much more resources and will still be less efficient than HTTP/2.

A benefit with the HTTP/1 approach is that you get the initial window once for each connection (during the TCP slow start) to send requests in, while for HTTP/2 you only get one single initial window.

score 0 · Answer 2 · answered Mar 02 '16 at 06:30

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.PushBuilder;

public class SimpleImagePush extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {

    String contextPath = req.getContextPath();

    PushBuilder pb = req.getPushBuilder(); 
for(int x=1;x<2500;x++)
    {
    pb.path(picturepath).push();  // picturepath is the path of the image in the server system. Adjust your filenames accordingly to use a for loop       

    }

}

Use the above Servlet to Push your images on to the client's browser cache. Once all the images have been pushed, activate your javascript to display them on your webpage — Dhumil Agarwal, Mar 02 '16 at 06:31

Loading thousands of small images onto a webpage

2 Answers2