As Jay described, Deep Zoom is above all about user experience. There’s no magic in it. It just does a remarkable job at delivering high-resolution imagery in an extremely efficient and, importantly, very intuitive way; the user never waits and the user is never lost. Imagine, for example, that I have a collection of photos on a sharing website such as Flickr. The typical “explore” experience is a gallery view with a hyperlink to each image. Imagine instead I could explore in the fashion below (Microsoft Silverlight required).
Here I can drag the image collection around to find areas of interest and zoom in and out entirely seamlessly. It’s a far more intuitive and engaging experience than any photo sharing website I’ve ever visited. So how does it work?
At its simplest, Deep Zoom decomposes an image (or set of images) into multiple zoom levels and, for each level, decomposes the image into increasingly larger arrays of tiles where each tile represents a part of the image. Thus at zoom level 1, we might have a 2×2 array of tiles while at zoom level 10 we might have a 2^10 x 2^10 (ie 1024×1024) array of tiles. Each array spans the whole image.
At low zoom levels, low resolution imagery can be delivered to the browser (the 1×1 or 2×2 array). As the user zooms in, progressively higher resolution imagery is delivered. Because the original image has been divided into perhaps many thousands of tiles, and we know “where” the user is in the image, only the tiles necessary to construct the portion of the image in the current viewport need be sent across the wire. The result is highly-efficient delivery of the imagery and a great panning / zooming experience.
The generation of layers and tiles is typically done up-front using a tool called Deep Zoom Composer (more on this in a later post) but it’s equally possible to do the work “on the fly”. The Deep Zoom Composer tool will help you import, layout and export a Deep Zoom composition as a functioning Silverlight application. You can then simply embed this in a web page as I’ve done here. Alternatively, you can have a lot more control by creating a custom Silverlight application. Silverlight uses a built-in control called MultiScaleImage to render Deep Zoom compositions.
Deep Zoom also gives you “springs animations” out of the box – as you drag and drop the composition around it accelerates and decelerates as if it’s loosely connected to the mouse pointer. It’s also possible to control the zooming / panning programmatically, “snap” to specific images etc.
In addition, Deep Zoom maintains knowledge of where individual images are located. You can combine this spatial data with metadata to give contextual information as the user navigates around the composition. Conversely, you can also manipulate the composition itself by allowing the user to filter using the metadata.
A great example of this (and one of the first Deep Zooms to be published) is the Hard Rock Cafe Memorabilia site. Notice the way that when you zoom into an item, relevant information is displayed in the panel on the right-hand side. Or, for example, you can select using the filters on the left to show only the items in the collection that relate to The Beatles or are instruments of one type or another.
For a purely fun take on Deep Zoom, fractLOL has to be worth a look – all your favourite LOLCats but deep zoomed. And the Shoothill “Deep Moon” Deep Zoom application created to celebrate the 40th anniversary of the Apollo moon landings is truly vast.
To learn more about Deep Zoom and its capabilities I’d recommend the following resources: