back

by Panoramix·5y ago·view on hn ↗
How would I go about building an application for displaying very hi-res images like this? you know, allows to zoom, only load when it needs to, etc.

Is it a big project? I'm really clueless (I'm not a programmer as you can tell though I know my way around Python).

1 comments
This site uses (1) prerendering different resolutions and (2) tiling.

(1) If you take a look under https://siliconpr0n.org/map/intel/4004/m0_200x/l1-tiles/ you'll see that the 1/ subdirectory has the most zoomed-out version of the chip image, 2/ has slightly higher-res images, and so on until 6/, which is full-resolution.

(2) Tiling means you might take a 12000x12000 (ie 144 megapixel) image, and split it into a 20x20 grid of 600x600 subimages (ie 0.36 megapixels each).

When you go to a URL like https://siliconpr0n.org/map/intel/4004/m0_200x/#x=2160&y=189... the site will (1) use the z=3 parameter to know it should be loading images from under https://siliconpr0n.org/map/intel/4004/m0_200x/l1-tiles/3/ then (2) do some arithmetic with the x+y parameters, and the browser window dimensions, to figure out which subimages actually need to be loaded from the server.

Zooming and panning can now be implemented by having your UI alter the x, y and z parameters.

I figured this out by opening the network tab (View -> Developer -> Developer Tools in Chrome) and watching the browser load files when I did things. Because all the files have simple names like "1.jpg", "2.jpg" inside a directory structure, I needed to hover over the filenames to see the full image URLs in a tooltip.

===

All of the above works with entire image files, which is good, because common file formats and APIs often won't let you do anything other than "load the entire file".

Some file formats allow you to load part of an image effectively. For instance, many PDFs will let you read page 53 by (a) reading enough of the header/index in the file (b) reading page 53, without needing pages 1-52 first. If you were writing something like a desktop image viewer you'd probably want to take advantage of this, but the details are likely to be very file-format-specific. You'd likely build on top of specialized libraries for TIFF, RAW, PDF and so on, rather than generic "load any image file" APIs.