What is Deep Zoom and how can it benefit my site?
Traditionally whenever a website has a lot of images to share, they put up something called an “image gallery.” The images are usually placed in a grid (columns and rows), and there is usually some sort of paging. This works, but there are problems.
- There are usually only a few images visible at a time.
- The client computer must make a connection for each and every image that is viewed. (even thumbnails can take up a lot of bandwidth)
- If an image gallery is pretty active, there can be a LOT of pages.
- If someone wants to look at the original size of the images, they are forced to download the larger version one at a time, often with a clunky interface.
- Depending on the dimensions of the original image, the thumbnail can be very blurry when shrunk down to fit into the smaller size
Deep Zoom allows for you to display any number of images that are many different sizes in a single collection quickly and easily allowing users to go from one image to the next, without having to worry about paging, or waiting for the next image to download.
Deep Zoom creates pyramids of “smaller” jpegs that make up a single image. This means that only the image of the needed quality level is downloaded. Initially only really low quality images of the entire collection need to be downloaded. As a user zooms in to an image that interests them, only the details for that image start to download to get a “more clear” view of just that image. If the user pans around the collection, only the details for the new images are downloaded.
What does this mean for you? If you happen to have a site that has a lot of images that nobody wants to look at, the highest quality of that image is never downloaded. This means less bandwidth is used, and often times that can save you money at your web hosting provider.
In addition to saving you money in bandwidth, you can create very rich user interfaces that allow advanced filtering and animation. Say for instance you filter your image search results. You can animate all of the “images that match” into position while animating the non matches off the screen.
Examples of successful deep zoom collections can be found at:
- Red Bull Stratos Media Gallery
- Hard Rock Memorabilia Page
- The Playboy Archive
- Shoot Hill
- 10,000 Rockets
Simply put, if you have a lot of images that you want people to look at, you should be using deep zoom. You can implement searching, filtering, and give descriptions on selected photos, all while sending the bare minimum amount of data needed to view your collections. This results in a lot of saved bandwidth, and gives users a much richer experience over the traditional “thumbnail/paged” approach of so many photo galleries.
Building your first collection with Deep Zoom Composer
Before we get into the nuts and bolts about how deep zoom works, lets get a basic collection of images created. Deep zoom composer can be downloaded from here.
After installing the application, run it. You will be greeted with the following screen:
Click “New Project…” and enter your save location and name. Click OK.
The project is now created, but you will have to add your images to the scene. You can Tell you on the import screen by looking at the navigation at the middle/top of the page.
To add images you can either use the “Add Image…” button on the right pane, or just drag and drop files from windows explorer onto the work area. Once you have done this, you should see something similar to the image below.
When you are done adding images to the scene, you click on Compose (top/middle navigation) and you will be greeted with a blank canvas.
Select all of the photos in the bottom area and drag them up into the scene.
You will notice that the default layout is not very desireable, so lets put them into a grid. Make sure all images are selected and right click them. Choose “Arrange…” and then “Arrange to grid…”
Once you are done, hit OK and you should get something like this.
We want to get these images out into a deep zoom project for preview, so click export on the navigation (top/middle). You will see a quick preview in the window pane, but on the right hand side you will see a few ways of exporting these images. Click on the “Custom” tab
Give the export a name and location. You can leave it on the default template/settings and then click “preview” (I will get into the settings more in depth in later posts once we dive into the code.)
You can see that the images all exported and the Silverlight project loaded up in the browser. Mission accomplished right? Well, while it is true that I exported images, there are a few things to concider. The images are very spaced out vertically. Nothing to worry about though, lets go back to Deep Zoom Composer and click back to the “Compose” tab (top/middle) you can click on individual images and resize them manually. When you move images around you will notice snap bars that will help you position images, and then drag them all to have the same height. Do this for every image to get something like this:
This collection looks a lot better. Unless you chose images that were all the same size the widths will vary a little, giving this staggered effect. You can spend a bit more time playing with the alignment tools and figuring out how you want your collection to look, but once you are done, go back to the export tab. Under our custom settings, change the template to be “Deep Zoom Classic + Source”
You will see that you can’t preview, which is fine. We want to export the project. this will give us a base project (complete with .sln file) that we can look at in depth later. After the project is exported, you can click the option to “view in browser”
The images are all exported, and they are all butted up next to each other! This looks a lot better, and people are more inclined to click on pictures that are barely visible past the image that has focus.
Thoughts on Deep Zoom Composer
Deep Zoom Composer is a fully capable tool for generating small, static collections. The problem is that most of the time you will need to update your collections periodically. If a collection that has 1000 images in it, it is going to be a very long and tedious process to position each and every image to where you want it.
The templates are also very generic. Most of my clients have wanted a very custom set of controls and branding to be applied to the collection viewer, So most of the time the templates that are there by default just won’t work. Luckily they give you a few templates with source code, so you can get into the nuts and bolts of how everything is stitched together, but it will still take some time to learn what they implemented.
Probably the biggest (and final) drawback to using Deep Zoom Composer is that there is only really 1 “meta tag” you can use to supply information to your images. “Tag”
This works well for the limited templates they have, but what happens if you want to add a long description, a short description, a link for sharing, a video that starts playing if you click on the image? There is nowhere to add any of this metadata.
Luckily, Microsoft knew this tool wouldn’t fit everyone’s needs, and as a result they left us with an SDK of sorts. This means that we can programmatically create our collections and FTP the files up automatically. You don’t have to manually position images anymore. We can choose exactly how we want our images to display, and at what zoom levels they should be at.
Next in the series I will be tackling deep zoom from a programming level. I will show you how to programmatically create images and collections. I will reveal how the coordinate systems work, and how to get your images into a format you want. I will also give concrete examples that will help you decide if you should use a Sparse Image, a Multi Scale Image collection, or a hybrid of the two.
See you next post!