2

This one's giving me a hard time - I'm wondering on how to properly implement mipmapping of pictures used on the web, mostly web stores.

I want to implement GoogleMaps-like zooming of high res images.

The problem here is not making the image viewer, it is the effectiveness and responsivity of the solution.

I could just load a double-resolution image and place it in a 256x256 box. When user scrolls (or does equivalent multitouch gesture), the box would enlarge up to 512 px and from about 480 px the 1024px image would be preloading and so on, until we reach the, say, 4096px barrier when no higher zoom or resolution would be available (or the zoom is a "digital zoom" now).

Let's say we have a bitmap of a certain bpp that would make the 256x256px image 100 KB in size. On simply switching the image to 512x512 version, the same 100 KB would quadruple to 400 KB, but the problem is only 300 KB more is needed, as we already have one of four pixels of the image (let's say the nearest neighbor method was used to resize/downscale the images). We would only need to double the row/column by loading the other rows/columns and merging those pictures in one 256x512 or 512x256 px image, then do the same for the second dimension.

This makes me wonder:

  • Are current computers/browsers/devices powerful enough to do such operation without significant performance drops?
  • Is this even possible? How?
  • are there any benefits after all?

Thanks...

EDIT 1: (from a comment): The question was mostly about saving bandwidth and/or minimize server load in terms of having to serve 8 pictures per single picture (in image size "tiering") or to serve one big (in terms of filesize) image, to save traffic and workload. Most people don't open/zoom the image, but I also wanted the "progressive" behavior of Google Maps (try to load a map and zoom in).

Example 1

Here's the process illustrated by Imagick. filenames are in form of x1-y1-x2-y2.ext:

convert 1-1-256-256.jpg 1-257-257-512.jpg +append -crop 256x1 +repage -append 1-1-256-512.jpg;
convert 1-1-256-512.jpg.jpg 257-1-512-512.jpg.jpg -rotate 90 +append -crop 512x1 +repage -append -rotate 270 1-1-512-512.jpg;

Example 2

Making single 4096x4096 interlaced PNG and load individual passes? (load just the first pass, then the other, etc.)

lmojzis
  • 551
  • 7
  • 17
  • @Mehul Kabaria may I ask why you proposed the change of LODing (Level of Detail) to LOADing? There was a reason why it was LODing and not loding… – lmojzis Sep 11 '19 at 13:11

1 Answers1

1

I'm working on something like this for myself too, but I don't know how generic I can make it. For now, you may have a look at Microsoft's Deep Zoom implementation. The Deep Zoom composer can break up your image into tiles of 256px squared. It will also scale down the image and generate tiles for each smaller size.

Displaying these tiles can be done using Silverlight, but there is also a JavaScript port of that technique called SeaDragon. You can download Microsoft's version which is -I believe- in some undefined state, or download OpenSeaDragon on GitHub, which is an open source version of it.

Both versions, but especially OpenSeaDragon also support additional features, such as overlays, which can be very useful if you want to make a map-like application.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210