How to Load High Resolution Images in your web application 🕵️

In this article, I discuss how to show High Res (4K 3K) images using the Quad-tree algorithm and how this algorithm is being used in Google Maps, etc to show map images.

Client Requirement

Recently I got a request from a client. It goes something like this

We want to see high-quality images without making them blur and our app slow, a user would typically zoom and pan the image, adding some markers on the images. All the images we upload are more than 1 mb and mostly high definitions images 3K,4K etc. These images are blueprints of buildings and floor plans.

Starting my investigation 🧐

Sometimes big images would take some time to load, like a sec or so and In the mobile app, it was super slow. If a user loads the same image it would load fast because of client-side caching.

So I thought why not prefetch 5 to 6 images and load them, but again this approach quite did not work for the mobile app because the user would sometimes choose to a random image. So my prefetching technique kind of failed 😵. I started my search to find out how to make the initial load time less.

After some googling and chatgpting, I found out I can leverage the Quadtree algorithm to load images in smaller tiles (256 Pixels). Writing the Quadtree algorithm from scratch is pretty time-consuming, so I used an existing library called Leaflet Map to load images. This library uses Quadtree to load images internally.

How Quadtree Algorithm helps in loading images

In a quadtree approach, your space (the container in which you are showing the image) has a Single Square of 256 x 256 pixels. If you zoom in it will divide itself into a 4x4 Square Grid. Note each square grid cell is 256 x 256 Pixels.

Let's see an example

Our original image blueprint.jpg is 2.19 MB in size and 5000 x 3117 Pixels

At zoom level 0, we can show them a single image of 256 x 256 Pixels. Notice the size of the image, it is 266 Bytes (137% less)😀 that's a lot less than 2.19 MB. This will decrease our initial load time on the Web and Mobile App. It is the Job of the image server to convert, your main image into 256 x 256 pixels, more on this later.

At zoom level 1, we can show them 4 images each image 256 x 256 Pixel. Notice the size of the image, it is 266 x 4 Bytes 😀 again that's a lot less than 2.19 MB.

Note: At zoom level 7 or 9 the image will be so big, only the visible image inside the container is loaded, the rest of the part is not loaded.

For example in the below image, at zoom level 3, it loads images only that should be visible in the viewport, instead of loading a single big image.

If you are still confused read this example and this example and try to zoom in and out.

Proof of Concept and Flow

The client wanted us to submit a POC (Proof of concept) and a small Flow diagram before implementing the whole feature.

We planned the whole flow would be like this

• A User uploads a big image

• The image server starts processing the images and starts dividing them into smaller parts 256 * 256 Pixel Tiles for each zoom level.

  

  shows a simple diagram of how images are divided into tiles.

• User is notified after the image is processed

• Users see Images using Leaflet Map

Summary

The client was pretty much happy and we were happy too 😚 I have included an example Github repo here