Microsoft made a big splash with Deep Zoom at the MIX 08 conference, introducing the technology to a thrilled audience (and many more who followed along with events online). Deep Zoom allows Silverlight developers to support smooth zoom and pan on huge, high-resolution images, even across limited-bandwidth connections.

There were really two big Deep Zoom news items from MIX. First, Vertigo had built a sensational Silverlight site for Hard Rock using Deep Zoom. Hard Rock Memorabilia, now a de facto Deep Zoom reference implementation, showcases Deep Zoom's incredibly smooth pan and zoom with features like mouse wheel support, filtering, position animation, and linked item information. The second MIX item was that Deep Zoom, along with an image composition/decomposition tool called Deep Zoom Composer, was available to Silverlight developers.

The gap between what the first iteration of Deep Zoom Composer produced (a tree of image tiles) and what Vertigo had done in Hard Rock Memorabilia (a feature-rich application) was sizeable, and there was neither code nor documentation to bridge that gap. The Expression Blend team quickly followed up with samples, and work by developers including Pete Blois, Scott Hanselman, Wilfred Pinto, and Jaime Rodriguez helped to establish a set of practices for working with Deep Zoom images and image collections in Silverlight.

Deep Zoom Composer's May preview pulled that work together into the composition tool. For the first time, Deep Zoom Composer built a starter Silverlight application to go along with the image tree. The starter application showed exactly how you could add essential features such as panning and mouse wheel zoom.

The current release of Deep Zoom Composer (download here) made its debut about a month later, alongside Silverlight 2 Beta 2. It drops the original binary file format in favor of XML, supports lossless PNG images as well as JPEG, and supports tagging images in a collection. This change to Deep Zoom Composer coincides with a Silverlight release because the new XML format must be supported by the MultiScaleImage display control as well as by the image composition tool.

Using Deep Zoom Composer
Deep Zoom provides users with the visceral experience of rapid and seamless zooming of large images served over the network. Although it appears as if you've got the breadth and depth of, say, the entire Hard Rock collection at your fingertips, you don't. Deep Zoom works by serving up tiles of the source image scaled at various resolutions, as few tiles as necessary to maintain the user experience without straining the bandwidth of the network.

Those tile sets must be prepared ahead of time. The XML file format and tile layout is documented, but at the moment there's no .NET framework support for building these tile sets programmatically. Instead, you use Deep Zoom Composer to lay out one or more source images and then publish that layout in the Deep Zoom format.

Figure 1. Deep Zoom Composer: In the Composition step, shown here, you take imported images and arrange them into a layout for later export in Deep Zoom format.

Using Deep Zoom Composer is pretty simple. There are three steps: Import, Compose, and Export. In the Import step, you pull in your source images. Deep Zoom Composer maintains images in lossless formats, so you have the opportunity to export a PNG or high-quality JPEG image at export time.

In the Compose step, shown in Figure 1, you arrange these images into the composition you want to present in your Silverlight program. There are tools for moving, aligning, and resizing each source image as you create the layout. Deep Zoom Composer can also automatically arrange collections of images into a grid. During composition, you can add tags to images in a collection. You can use these tags to support filtering in your Silverlight application.

When you're ready to export, you have a few choices to make (Figure 2). First, you can choose between exporting a single composition or exporting a collection. This is an important distinction. A composition is logically a single image for display, and it's static. The arrangement you created in Deep Zoom Composer will be preserved and presented as is. If you choose a collection, your Silverlight application will have access to each subimage that you've imported, and you'll be able to rearrange or hide these subimages using code. A composition is how you'd display a map or a large-format developer reference poster. A collection is the dynamic set of images you see in Hard Rock Memorabilia.

Figure 2. Export Options in Deep Zoom Composer : In the Silverlight 2 Beta 2 release, you can export as PNG or JPEG and set JPEG image quality.

You also need to decide the export image format. Deep Zoom Composer supports JPEG as a lossy format and PNG for lossless images. If you choose a JPEG export, you can also set the image quality.

Finally, Deep Zoom Composer gives you the option of creating a starter Silverlight application to host the generated image. If you go that route, Deep Zoom Composer creates a complete Silverlight project that you can pull into Visual Studio 2008.

When you click the export button, Deep Zoom Composer slices the image or image collection into its component tiles and places these into a set of folders in the export directory. It also creates a file that describes the generated image called dzc_output.xml. This is the file that you'll supply as the source to the MultiScaleImage control when you display the image in Silverlight.

That's the short version of the export process, but it doesn't do much to explain why some of the changes introduced with Silverlight 2 Beta 2 are so interesting. A longer description may make that clearer. At export, Deep Zoom Composer first creates a file called SparseImageSceneGraph.xml that lists the images you've added to your composition and describes the layout. This file is then fed to SparseImageTool, a command line tool that actually creates the Deep Zoom image or image collection.

SparseImageSceneGraph.xml specifies the Z-order for each image in a collection. The Z-order determines the order in which subimages will appear when the collection is loaded into a MultiScaleImage control. That means that Z-order can be used as an identifier when locating subimages in your application. To support tagging of subimages, Deep Zoom Composer generates a second file called Metadata.xml with a structure very similar to that of SparseImageSceneGraph (including Z-order) but with an additional Tag property for each image. In your Silverlight application, you can run queries against Metadata.xml to find the Z-order of images that match selected tags. This provides a basis for supporting filtering of images in a collection.

SparseImageTool both generates the tiles and creates the output XML file that's used as the MultiScaleImage source. Before the Silverlight 2 Beta 2 release the output file format was binary, so making changes to a collection required re-running SparseImageTool against the full set of source images. With the XML output format it is much easier to make incremental changes, using SparseImageTool to generate tiles only for new or modified images and editing the XML file by hand or with a script.