Viewing High-Resolution Images with the MultiScaleImage Element

Providing web content optimized for mobile devices is an important challenge facing developers today. The high cost of data plans and relatively low connection speeds provided by many telcos mean phone app developers need to be mindful of techniques that can minimize network usage.

The MultiScaleImage class is one of the key elements of Silverlight’s Deep Zoom technology. Deep Zoom allows an application to interactively view high-resolution images and to limit the download of image content to portions of an image that are being viewed on the screen and at a resolution appropriate to the scale of the image at the time.

Downloading only part of an image can vastly decrease the time it takes to present the initial view of the image, and it unlocks user exploration of high resolution images, which would otherwise consume too much bandwidth.

MultiScaleImage works well on the phone and is even more suited to the phone than to the browser or desktop because of Windows Phone’s touch support, allowing the user to pinch to zoom, for example.

Potential uses of Deep Zoom technology include mapping, photo galleries, high-resolution images, and interactive ads.

MultiScaleImage is modeled after MediaElement and allows a user to open a multiresolution image or collection of images. Multiresolution images can be created using a free tool provided by Microsoft called the Deep Zoom Composer.

When a Deep Zoom image is first viewed, it is normally presented in its entirety scaled-up at a low resolution and allowing the user to drill down into the image. When drilling down, higher resolution subimages (or tiles) are retrieved, which blend with the larger and lower-resolution portion of the image.

As the user explores the image by panning and zooming, higher detail tile images are downloaded and blended in. This is like the interlacing feature of the GIF image format. At first the image appears to be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more crisp. As a result, Deep Zoom images can be opened faster, regardless of file size, because they do not require a substantial part of the image to be downloaded before being displayed.

A compelling feature in Deep Zoom is that multiple images can be used to compose a scene, and they can be optimized individually while still maintaining the overall appearance of the image. Collections of images can also be manipulated programmatically.