Deep Zoom (aka Seadragon) provides the ability to interactively view high-resolution images.
Image may be NSFW.
Clik here to view.
You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables smooth loading and panning by serving up multi-resolution images and using spring animations.
In the following presentation Blaise Aguera y Arcas demos the Deep Zoom & Photosynth. This will give you a pretty good idea what this technology is about:
…the only thing that ought to limit the performance of a system like this one is the number of pixels on your screen at any given moment.
The Image Pyramid
Deep Zoom, or for that matter any other similar technology such as Zoomorama, Zoomify, Google Maps etc. uses something called an image pyramid. It allows the rendering engine to pick and choose only the data that is required for a particular view. Each level is significantly smaller than the next, and is loaded as soon as it becomes available. The smooth experience is created by progressively loading each new resolution level and seamlessly blending between them. The following illustration below shows what the image pyramid looks like conceptually:
Image may be NSFW.
Clik here to view.
At each level of the pyramid, the image is scaled down by 4 (a factor of 2 in each dimension). Also, the image is tiled up into 256×256 tiles by default. If you zoom in to a specific area of a large image, then only those tiles needed to show the specific areas are downloaded.
After creating your own Deep Zoom Image, you end up with a folder structure that mimics the levels of the pyramid along with metadata:
Image may be NSFW.
Clik here to view.
The folder structure and metadata can be created programmatically or by a tool like DeepZoom Composer.
To get more details about the image pyramid and the Deep Zoom file format refer to the following articles:
- Seadragon Developer: Creating Content
- Inside Deep Zoom – Part I: Multiscale Imaging
- Inside Deep Zoom – Part II: Mathematical Analysis
- Deep Zoom File Format Overview
Deep Zoom Collections
A collection is made up of multiple images. Deep Zoom optimizes working with a collection of images by enabling lower levels of multiple images to share tiles which, reduces network traffic and render hundreds of high-resolution images at once.
For example, Deep Zoom can load and decode only one tile, and retrieve the thumbnails for a hundred images in one operation.
The following illustration shows how thumbnails are stored at various levels of detail.
Image may be NSFW.
Clik here to view.
Toward the top of the pyramid, all the images are packed into a single tile. In the middle of the pyramid, images share tiles, but multiple tiles may be needed to contain all the images. At the bottom of the pyramid, there is usually one image per tile.
With Deep Zoom Collections you are able to programmatically move individual multi-resolution images around the screen or filter your images. This leads to interesting applications like Live Labs Pivot.
For more detail, check out A Deep Zoom Blog: Deep Zoom Collections Explained.
Scenarios & Applications
Deep Zoom can be used in many different areas. A classic example is zooming in on parts of a large map to see different levels of detail and then, using the mouse, moving your view around the map surface. As the user moves their view, animations are used to give the user the impression that they are "moving" from one place to the other on the image.
Bing Maps is build on Deep Zoom technology. In the following TED presentation Blaise Aguera y Arcas demos augmented-reality maps powered by Deep Zoom & Photosynth technology.
The version Blaise Aguera y Arcas demoed in this presentation is now live. Go check it out here.
Image may be NSFW.
Clik here to view.
Another example is exploring a professional photo composition made up of high-resolution pictures. The Mona Lisa Deep Zoom Composition featured on this blog falls into this category. Also see the deep zoom art project from Kunsthaus Zürich. It is featuring 8 paintings from Van Gogh, Cézanne and Monet. Combined the deep zoom images have a resolution of over 4 Gigapixel.
Deep Zoom technology is used in Photosynth. Photosynth allows you to take a bunch of photos of the same scene or object and automatically stitch them all together into one big interactive 3D viewing experience that you can share with anyone on the web.
Live Labs Pivot is a new technology developed by Microsoft Live Labs that makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun. The image content for a Pivot collection consists of a Deep Zoom Collection of individual Deep Zoom images. The Hard Rock Memorabilia site was the first popular site that provided a “Pivot like” experience by using Deep Zoom Collections.
This site provides a Pivot view to explore all available blog posts. You can slice and sort the content by category, tag or date. Try the live version here.
Tags: innovation, programming, technology, usability, visualization Related posts