Powered by

US - English
NEW! Silverlight 5 is available Learn More

Collection Image Content

By Microsoft Silverlight Team|July 18, 2011|Level 300 : Intermediate

Every PivotViewer collection contains a set of images stored in the Deep Zoom format.

The first section of this document provides a quick start guide to build a Deep Zoom image collection for PivotViewer. The rest of the document describes the Deep Zoom format, discusses the various tools, technologies and techniques for authoring image content, and provides more detailed information on image encoding considerations and deploying image collections on production servers. Sections:

Quick Start

There are a number of ways to create the Deep Zoom images that will be part of a PivotViewer collection. It depends on how the PivotViewer collection is being created and whether this is a "one off" collection or is part of a production work flow. All of the procedures summarized in this section are described in more detail later in this document.

Creating a PivotViewer Collection from Scratch

The Pivot Collection Tool for Excel is the easiest way to create the images for a PivotViewer collection. This tool enables you to represent a PivotViewer collection in a spreadsheet, and then convert that spreadsheet to a format understood by PivotViewer. Images are included by providing paths to the source files as one of the columns in the spreadsheet. The Deep Zoom image collection is automatically generated during the publishing step. No extra steps are required.

Manually Creating a Deep Zoom Image Collection

It’s not uncommon to create the PivotViewer metadata CXML file from content stored in an existing database by implementing the appropriate XML export. In this case, the Pivot Collection Tool for Excel is not required, and other tools are used to build the Deep Zoom images used by the PivotViewer collection. This can be accomplished with Deep Zoom Composer or the Deep Zoom Tools Command Line Utilities, both available as free downloads from Microsoft.

Deep Zoom Composer

Deep Zoom Composer is a graphical utility for creating Deep Zoom Collections. It provides many advanced features, but only a fraction of its capabilities are required to build the images required for a PivotViewer collection.

  1. Import the source images to be included in the collection.
  2. Drag the images to the Layout work area. It doesn’t matter how they are laid out.
  3. Use Custom Export, specifying Images as the Output Type, and exporting as a collection.

Deep Zoom Tools Command Line Utilities

Deep Zoom Tools Command Line Utilities are included in the free download of the Deep Zoom Tools Library. These two utilities can be automated using conventional shell scripting techniques:

  1. Use DZConvert.exe to convert multiple image files into Deep Zoom Images (DZI).
  2. Use DZCollection.exe to convert multiple Deep Zoom images into a Deep Zoom Collection.

Custom Applications to Create Deep Zoom Image Collections.

For production work flows, it’s often desirable to create a custom application to generate or update a PivotViewer Collection. The Deep Zoom Tools Library (DeepZoomTools.dll) makes it easy to create Deep Zoom Images (DZI) and Deep Zoom Collections (DZC) as part of any custom Windows application. DeepZoomTools.dll is available as a free download from Microsoft, and includes sample applications with source code. For more information, please see: this DeepZoom Quickstart.

Deep Zoom Images and Collections

Overview

The image content for a PivotViewer collection consists of a Deep Zoom Collection of individual Deep Zoom images. To enable efficient progressive access to large collections of arbitrarily sized images, the Deep Zoom format consists of pre-rendered, tiled image pyramids for both single images and collections. Images must first be converted to this format, and there are multiple tools and techniques to accomplish this.

Each individual item image is encoded in a tiled pyramid as a Deep Zoom Images (DZI). The complete set of Deep Zoom Images included as part of a PivotViewer collection are encoded as a Deep Zoom Collection (DZC). The DZI and DZC formats are open, and fully documented online on the Microsoft Developer Network (MSDN) web site.

Illustration of DZI (left) and DZC (right).

The following two sections provide a brief overview of the associated file organization.

Deep Zoom Image (DZI)

A Deep Zoom image consists of an XML file plus a subdirectory at the same location and with the same name, plus the suffix "_files". For example, a DZI named "foo" will consist of the file "foo.xml" and the subdirectory "foo_files". The XML file may have either the .xml or .dzi extension. The .xml extension is commonly used to accommodate web server requirements. The subdirectory includes multiple subdirectories for each resolution level of the image. Each of these subdirectories contains the individual tile image files for that resolution level.

Deep Zoom Collection (DZC)

A Deep Zoom Collection consists of an XML file for the collection plus a subdirectory at the same location and with the same name, plus the suffix "_files". The XML file specifies the names of the individual DZI images within the collection. While it is not mandatory, the default location of the collection’s DZI images is a subdirectory at the same location as the CXML file, with the same name plus the suffix "_images". This subdirectory contains one or more DZI images (XML files plus subdirectories.)

Sparse Images

Single Deep Zoom images can also be "sparse images." A sparse image has different resolutions in different areas, and is typically created by merging together multiple source photos at different scale and/or resolution. Any number of items within a Deep Zoom Collection may be sparse images. PivotViewer provides full support for sparse images within a PivotViewer collection.

Deep Zoom Image and Collection Content Creation

Pivot Collection Tool for Excel

The Pivot Collection Tool for Excel is an Excel add-in for creating, editing and exporting PivotViewer collections. The Pivot Collection Tool for Excel includes the ability to convert source image files directly to a Deep Zoom Collection (DZC) as part of the PivotViewer collection. For complete information on how to download and use the Pivot Collection Tool for Excel to create PivotViewer collections, see: Collection Tools.

Deep Zoom Composer

If the PivotViewer metadata CXML file is created using a tool other than the Pivot Collection Tool for Excel plug-in for Excel, then the Deep Zoom image collection needs to be created using another tool.

Deep Zoom Composer is a free tool from Microsoft for creating complete Deep Zoom experiences. It can create Deep Zoom images (DZI), and Deep Zoom Collections (DZC), as well as complete Silverlight Deep Zoom or Ajax viewers and the associated web pages. While not required for creating PivotViewer collections, Deep Zoom Composer can also create fully interactive Silverlight Deep Zoom images and collections using a variety of customizable and pre-built templates.

For the purpose of building content for PivotViewer, only the exported Deep Zoom Collection (DZC) is required.

Deep Zoom Composer can be downloaded for free from the Microsoft Download Center.

Creating a Deep Zoom Collection

Creating a Deep Zoom Collection for PivotViewer consists of importing multiple source images, placing the images on the layout panel (the arrangement is completely arbitrary), and then exporting the set of images to a DZC file set.

  • Start Deep Zoom Composer and create a new project.
  • Select the Import tab and add the image files you want to convert to Deep Zoom Images (DZI).
  • Select the Layout tab and drag the source images from the gallery on the left into the layout area. The specific layout is not important; this won’t be used by PivotViewer.
  • Select the Export tab.
  • Select the Custom tab on the right panel.
  • Select Images as the Output type.

  • Specify the name and the directory location for the exported DZI file.
  • Select "Export as a collection (multiple images)". This is required to create a Deep Zoom Collection rather than a single Deep Zoom Sparse Image.

  • Set the Image Settings as desired.
  • Click the Export button.

The specified output directory will contain a subdirectory of the name you specified in the Export options. That directory contains the DZC file named dzc_output.xml plus the associated collection subdirectories dzc_output_files and dzc_output_images. You may rename them as desired, as long as they still correspond to required naming relationships. Additionally, the item filename references inside the DZC file will need to reflect the correct location name for the _images subdirectory.

Individual images within a PivotViewer Collection are referenced by their index within the Deep Zoom Collection. It’s important to review the Deep Zoom Collection (DZC) XML file created by Deep Zoom Composer to insure the image ID references in the PivotViewer Collection CXML file references the correct image for each collection item.

Creating a Sparse Image

Deep Zoom Composer can also be used to create individual sparse images as DZI files. Other tools are then required to create a Deep Zoom Collection from the individual DZI files.

To create a sparse image DZI file:

  • Start Deep Zoom Composer and create a new project.
  • Select the Import tab and add the source images that you want to merge together to create the sparse image.
  • Select the Layout tab and drag all the desired source images to the layout area. Resize and arrange the images as desired.
  • Select the Export tab.
  • Select the Custom tab on the right panel.
  • Select Images as the Output type.

  • Specify the name and the directory location for the exported DZI file.
  • Select "Export as a composition (single image)". This is required to create a single DZI image rather than a collection of separate images.

  • Set the Image Settings as desired.
  • Click the Export button.

The specified output directory will contain a subdirectory of the name you specified in the Export options. That directory contains the DZI file named dzc_output.xml plus the associated subdirectory dzc_output_files. These are the only files required to display the Deep Zoom Image using Seadragon Ajax. You can rename them as desired, as long as the file directory is in the same location as the .xml file and is the same name plus the "_files" suffix.

Deep Zoom Tools

DeepZoomTools.dll is installed as part of both Deep Zoom Composer and the Pivot Collection Tool for Excel. This library can also be downloaded along with sample applications and source code from this DeepZoom Quickstart.

DeepZoomTools.dll provides a powerful and simple to use method to incorporate Deep Zoom Collection creation within your own custom content management applications.

In addition to the information on the Deep Zoom developer’s web page, you can read more about DeepZoomTools.dll in this blog post from the Expression team. Additionally, a simple Bing search will uncover several additional examples of developers using DeepZoomTools.dll to create Deep Zoom content.

Deep Zoom Tools Command Line Utilities

There is a pair of sample applications for DeepZoomTools.dll, providing the ability to easily build Deep Zoom Images (DZI) and Deep Zoom Collections (DZC) from the command line. The Deep Zoom Tools Command Line Utilities, including the full source code, are available as a free download from the Developer’s web page.

As a parameter driven command line tools, the Deep Zoom Tools Command Line Utilities can be used to easily automate repetitive content creation work flows.

There are two separate utilities. DZConvert.exe converts one or more image files to Deep Zoom Image (DZI) files. DZCollection.exe converts one or more Deep Zoom Images (DZI) into a Deep Zoom Collection (DZC.)

DZConvert.exe converts single images into the equivalent Deep Zoom Image (DZI). Deep Zoom Composer must be used to create sparse images.

DZCollection.exe provides an extremely efficient method to build or re-build a Deep Zoom Collection when adding or removing images, or when only a subset of the images needs to be updated. It eliminates the bulk of the work generating the individual image tile pyramids.

Because sparse images are typically built as individual Deep Zoom Images (DZI), separately from building a Deep Zoom Collection (DZC), DZCollection.exe is an ideal solution for creating a Deep Zoom Collection from previously created sparse images.

Individual images within a PivotViewer Collection are referenced by their index within the Deep Zoom Collection. It’s important to insure the PivotViewer Collection CXML file references the correct image for each collection item. DZCollection.exe builds the collection in the order it retrieves the source Deep Zoom images, typically sorted by filename within the specified wildcard set. DZCollection.exe also provides a verbose report option, listing the pertinent information about each item added to the collection. This report can be saved to a file via command line redirection to aid in subsequent automated processing steps.

Image Processing Guidelines

File Format

The tile pyramids for Deep Zoom images and Deep Zoom collections can be encoded as JPEG or PNG files. Each format has its own advantages and disadvantages, so it’s important to select the most appropriate format based on the source image content.

JPEG

For most scenarios, JPEG is the appropriate file format. JPEG is the de facto standard for web images, as it provides the greatest level of compatibility with the overall image and web ecosystem. JPEG also provides effective compression efficiency for continuous tone images, such as photographs or drawings with shading and gradients.

JPEG provides configurable lossy compression. There will always be some degradation of the source image, but depending on the image compression settings (discussed below) this degradation is often completely undetectable.

PNG

PNG is a lossless image format. It provides very inefficient compression compared to JPEG for continuous tone images, but often provides as good or better compression for simple diagrams, text, or other images with single color backgrounds. For high contrast content (like text and line drawings), PNG eliminates the harsh artifacts that are typical when using JPEG compression for this type of content.

PNG also supports an optional alpha channel, making it possible to present images with transparency. There are limited uses for this in typical PivotViewer collections, but it can be used to provide non-rectangular or partially transparent items images.

However, adding an alpha channel increases the overall image file sizes, and using PNG for continuous tone images (such as photographs) can significantly degrade the overall collection experience due to the slower performance associated with the larger files. This also increases server storage requirements, deployment time and bandwidth costs.

Image Compression

The overall performance and bandwidth costs and deployment time for any Deep Zoom Collection experience can be optimized by choosing the most appropriate image compression settings. Increasing the amount of compression will produce smaller image tile files that transfer faster and decoder quicker. But too much compression may adversely impact the quality of the displayed images.

PNG offers perfect image reproduction (lossless compression), but is extremely inefficient for photos and other continuous tone images. PNG is typically the best choice for line drawings, text or other images with high contrast edges and monochromatic backgrounds. There are no options to adjust PNG’s compression. It’s a fixed algorithm and the amount of compression depends on the image content.

JPEG offers a range of lossy compression, expressed as a compression setting from 1-100. The higher the value, the smaller the amount of compression and the higher quality the reproduction compared with the original source.

A typical value for JPEG compression is 80. Using a compression setting greater than 90 will invariably create much larger files with no noticeable increase in quality. For many scenarios, values of 70 or lower can be used and still provide perfectly acceptable quality images while significantly reducing the size of the individual image tile files.

The best approach is to experiment with different settings, carefully evaluating the image quality while also comparing the resulting file size. A modest change in the compression parameter may cut the file size by a factor of two or more with no noticeable impact on image quality. There are no absolute rules here. The results depend on the source image content so the only guaranteed methodology is experimentation.

For high contrast content (line drawings, text, etc.) higher quality settings will be required. The compression efficiency may be less than for continuous tone images, but will typically be significantly better than using PNG for the same content.

Again, successfully optimizing the compression settings for any particular content requires experimentation. There is no "magic rule" that will work with all content types. It’s important to try a variety of settings and find the best compromise between file size and image quality for each specific scenario.

Color Profiles

Unless otherwise set by the content author, most image files contain an sRGB color profile definition, or in the absence of a specific color profile definition, are assumed to be rendered in the sRGB color space.

Deep Zoom rendering in PivotViewer assumes that all image tiles are based on an sRGB color profile. If image or collection tiles are created based on a different color profile, they will not render correctly in PivotViewer.

DeepZoomTools.dll as well as Deep Zoom Composer (which uses DeepZoomTools.dll) will respect the color profile of the source image and correctly convert to sRGB when building a Deep Zoom image or collection.

If any custom tools are used to generate Deep Zoom tile sets rather than using DeepZoomTools.dll, those tools should also detect and respect the source image color profile and apply the appropriate conversion to sRGB.

DZC Format vs. DZI Image Format

Within a Deep Zoom Collection used in PivotViewer, it’s technically possible for the image pyramids for the individual Deep Zoom Images (DZI) to use different image file formats (JPEG or PNG) as well as different compression settings.

To maximize compatibility with other implementations of Deep Zoom technology, a consistent file format for the image tiles for all Deep Zoom Images (DZI) in the collection, as well as the image tiles for the Deep Zoom Collection (DZC), is recommended.

It is perfectly acceptable, and often desirable, to use different lossy compression settings for individual items in a collection, or for the collection tile pyramid vs. the image tile pyramids. For example, it may be desirable to use a higher quality setting for the collection tile pyramid, minimizing any visible compression artifacts for the low resolution image levels. However, because compression artifacts are typically less visible at higher resolutions, a lower quality setting can be used for the individual image tile pyramids, reducing storage requirements and improving performance. Because the collection level tile set is typically a small percentage of the overall collection size, the cost of higher quality compression at this level is minimal. Just keep in mind that the image tiles for the Deep Zoom collection are typically created from the image tiles of the individual Deep Zoom images, so a huge difference between the quality settings may not offer any benefits. As always, a few experiments can help discover the most effective settings for any particular image collection.

Deploying Deep Zoom Collections

Overview

Deep Zoom Collections consist of nothing more than XML and image files, and are accessed using conventional http protocols. No special web services beyond a simple file store are required to deploy Deep Zoom image collections.

There are some considerations when deploying large Deep Zoom Collections based on the sheer volume of content involved. Building tile pyramids can create a lot of files. A Deep Zoom Collection created from hundreds or thousands of high resolution images can result in tens or hundreds of thousands of individual image tile files. For example, a collection containing 600 six megapixel images will consist of over 140,000 individual files in over 14,000 subdirectories.

While the total disk space consumed by those files is only incrementally larger than the original source images (typically 1.4x, assuming the same compression ratio), moving hundreds of thousands of files can be challenging. There are a number of techniques that can be used to minimize the work required to deploy Deep Zoom Collection content to a production web server.

Collections consisting of lower resolution images will have a much higher ratio of directories to files because there will be fewer directories containing large numbers of image tile files. For example, a collection created from 2,600 ¼ megapixel images will consist of 51,000 files in 32,000 subdirectories.

Generate in Place

One straightforward technique that may be appropriate for certain production scenarios is to avoid the deployment step completely by generating the Deep Zoom Image (DZI) and Deep Zoom Collection (DZC) content directly on the production server. While this approach may not be viable for all scenarios, it can be very efficient for a well-established production configuration to perform the image content creation tasks directly on the origin server, completely avoiding the need for additional steps to move the content to its hosted location.

A typical implementation involves staging and deploying source image content, or an appropriate manifest with links to the source image content, and then running a production server hosted process to create the Deep Zoom Collection in place from the source images.

It may also be advantageous to run the content creation process on local machines, but save directly from the content creation application to the target deployment server. The goal is the same: eliminate unnecessary copies for large numbers of files and directories.

This technique is not appropriate in cases where it is not feasible to run the content creation process on the production server, when it’s required to pre-stage content for test or verification prior to deployment, or when significant replication beyond the origin server is required.

Content Reduction

There are a few techniques that can be performed to reduce the number of files that need to be deployed.

The tip of each Deep Zoom Image (DZI) pyramid duplicates the content that is included in the Deep Zoom Collection (DZC) image pyramid. In cases where the images are always accessed as elements within a collection, the files and directories that make up the tip of each DZI pyramid are redundant and can be eliminated. In a typical collection, this can eliminate up to nine files and nine directories for each item in the collection. While it may be a small number of the total files, this can eliminate a significant number of the directories that must be created and copied. In the example above with ¼ megapixel images, this technique would eliminate over 80% of the required directories and over 40% of the image tile files.

While Deep Zoom technology allows arbitrarily large images to be included in Deep Zoom Collections, scenarios that use low resolution images may be able to completely eliminate the individual Deep Zoom Image (DZI) files and store all of the image data in the Deep Zoom Collection.

Various Deep Zoom content creation tools provides flexibility in setting the dimensions for image tiles. Using a larger image tile size can reduce the number of files required. Depending on the content type, this may create an undesirable increase in tile load latency, so this capability should be used carefully. But for content material that provides efficient image compression, using larger tile sizes can significantly reduce the number of individual files and directories required for deployment.

Generate to ZIP

A custom content generation work flow can generate Deep Zoom image and Deep Zoom collection content directly to a ZIP file rather than to individual image tile files. Significantly less overhead is required to deploy a small number of large ZIP files to the production server vs. tens or hundreds of thousands of individual image files. However, this custom work flow would also require a process on the production server to unpack the ZIP file into the required directory structure.

Updating a Collection

A Deep Zoom Collection should not be updated in place. If any users are currently viewing the collection, their current collection navigation is based on information from the CXML file, cached locally by the application. Changing the collection contents will invalidate this cached information, most likely causing the user to experience inconsistent and undesirable results.

To correctly update a Deep Zoom collection, create an entirely new collection, deployed at a different URL. This URL should contain a unique identifier, such as a version number or deployment date. The web page hosting the collection can then be updated to reference the new collection URL. Users currently accessing the web page will continue to be served by the old version. New requests to the web page will receive Deep Zoom content from the new URL. For a PivotViewer collection, the URL for the PivotViewer CXML can remain the same; only the PivotViewer CXML file needs to be updated to reference the URL for the new Deep Zoom collection. Again, users currently accessing the PivotViewer collection will continue to receive content from the previous Deep Zoom collection, but anyone reloading the PivotViewer CXML file will now correctly receive the updated Deep Zoom content that matches the updated PivotViewer CXML file.

As long as there are no changes to individual Deep Zoom images within a collection, only the Deep Zoom Collection needs to be updated. New Deep Zoom image files can be deployed and others can be deleted, but only the Deep Zoom Collection needs to be updated. As long as existing Deep Zoom images aren’t modified, they do not have to be deployed again. This can be dramatically more efficient than recreating and redeploying all of the individual Deep Zoom images. It also allows PivotViewer (and other Deep Zoom applications) to reuse any Deep Zoom image tiles that are already cached locally.

If you are ONLY adding new Deep Zoom images to a Deep Zoom collection, not removing or changing any images, or making any changes to the order of the images within the collection, you can simply overwrite the old collection with the new one. As long as the Deep Zoom Collection (DZC) XML file and the PivotViewer Collection CXML files are the last files updated, this in-place update will be transparent. Existing users will continue to access the previous set of images; newly added images will not interfere. When the collection is reloaded, then the new images will be available.

Caching a Collection

A Deep Zoom collection can be treated as entirely static content by the deployment web server. To maximize efficient access to this content, it’s important to set aggressive caching options. For instance, the full collection of files that make up a Deep Zoom Collection should have a cache setting to never expire. This will significantly reduce repeat content access requests (including PivotViewer or Deep Zoom), as well as intermediate proxy servers. Instead, repeat content requests can largely be served from local and intermediate proxy caches, improving performance while reducing both server load and bandwidth costs.

The XML files used by Deep Zoom and PivotViewer collections will also benefit from HTTP compression. Most web servers have a way to enable HTTP compression. This compression option should be enabled for any XML file types used for Deep Zoom and PivotViewer, including .XML, .DZC, .DZI and .CXML. Options should also be enabled to ensure these files are compressed once, on first use, since their content won’t be changing dynamically.

Copying files

When there is no choice but to copy the individual files to a deployment server over a network connection, there are a few techniques that streamline this process.

Windows includes ROBOCOPY, a command line file copy utility that is the recommended tool for copying large numbers of files and directories locally or across network connections. ROBOCOPY takes full advantage of all system and network resources for multiple copy threads, and has great options to mirror entire directory structures and intelligently restart a previously interrupted copy without the need to retransfer unchanged files.

If both the source and destination computers are running Windows Vista (SP1 or later), Windows 7, Windows Server 2008 or Windows Server 2008 R2, full SMB2 support is available. In this environment, the built in file copy features in Windows Explorer are also more efficient than was the case with previous versions of Windows or when copying in a heterogeneous operating system environment. While ROBOCOPY is still the preferred tool, this can be handy for quickly copying smaller Deep Zoom images or collections.

Performance may also be significantly improved by temporarily disabling anti-virus software, eliminating unnecessary processing of the individual files being copied.

Similar to generating content to a ZIP file discussed earlier, another option for deploying an existing Deep Zoom Collection is to compress the directory structure to one or more ZIP files, copy the ZIP files to the server, and then unpack the ZIP files on the server back into the original directory structure. Depending on the deployment server environment, the network, computer performance, the end-to-end time for this work flow may be more efficient than copying all the content as individual files and directories.

Summary

Deep Zoom image collections for PivotViewer are deployed using an open, fully documented format, built on industry standard content elements. This same format is shared across a variety of Deep Zoom-powered solutions from Microsoft, powering the next generation of web experiences.

Microsoft provides a variety of free tools to author image content for PivotViewer collections, including an easy-to-use-library for custom work flow solutions. The open nature of the Deep Zoom format makes it straightforward to build PivotViewer collection authoring applications for any platform or development environment.

Feedback

Join our technical discussion forum to interact directly with the PivotViewer community. We hope you’ll join this community and share your work.

Microsoft Silverlight Team

By Microsoft Silverlight Team, Silverlight is a powerful development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline.

Comments (0)