0

What is the best way (best load times and framerate) to create a big image, with several images, with HTML/Javscript ? We must be able to zoom, pan, and drag image (like google map).

There are approximately 1000 images of 200px / 200px.

I saw several options:

I also found some interesting articles on the differences between canvas / svg / div :

Community
  • 1
  • 1
Martin Lbc
  • 15
  • 5
  • Please rethink your design ... 1000 times 200px images will not be responsive. It won't even fit on the largest of displays and will take about 160MB of memory to buffer. Are you doing a collage of images? Perhaps create 1000 tiny thumbnails and call larger images on-demand when zooming. – markE Jun 03 '16 at 18:00
  • Your combined image consists of 1000 200x200 images... so why not use elements? Because you need to zoom? Precompute thumbnails of different dimensions and swap & replace your images as the user zooms. Or do you need to create image data on the fly? Then use canvas. – le_m Jun 03 '16 at 19:23
  • 1000 images at 200/200 that is an approx image size of 6400/6400. With reasonable JPEG quality 10K each and stored as JPEG (files in typed arrays) you can decompress them as needed and render them to a canvas. You may not get continuous 60fps but you will get near realtime. The trick is to not store the images as images but keep them as binaries, and find a good JPEG decoder (or some other format) as the bottleneck will be in decoding. For display you only need to render to the res of the device and only those parts that change between frames – Blindman67 Jun 03 '16 at 20:47
  • Thank you for your answers. I had not seen the problem under this angle. I had thought used by labels (30px X 30px) and loading certain big images according to the positioning of the zoom. So, it is better to load an array of all binary image (in JSON for example) ? – Martin Lbc Jun 06 '16 at 11:33

0 Answers0