CODEWITHSUNDEEP
htmlgoogle-chromehttpwebhttp2
chbrown
chbrown

Reputation: 12028

Loading thousands of small images onto a webpage

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.

Upvotes: 1

Views: 1235

Answers (2)

Dhumil Agarwal
Dhumil Agarwal

Reputation: 874

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       

    }

}

Upvotes: 0

Daniel Stenberg
Daniel Stenberg

Reputation: 58002

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.

Upvotes: 1

Related Questions