Why Silverlight 2 Deep Zoom Really is Something New - Jon Galloway

Why Silverlight 2 Deep Zoom Really is Something New

The Hard Rock Memorabilia site got a lot of press MIX 08; TechCrunch called it the coolest part of the MIX keynote. It takes advantage of a new Silverlight 2 feature called Deep Zoom, which allows for smooth zooming and panning over a large collection of large images. It's really the kind of thing you have to see; words don't capture it well.

To frame the conversation, I'm going to include a video, but you really should just browse the site instead so you can see the smooth transition between the zoom levels, etc.. Go ahead browse the Hardrock Memorabilia site - Silverlight 2 installs in seconds, and doesn't require a reboot or anything. Well, it should install smoothly for you unless you're an Adobe Flash staffer who might not want it to install smoothly - can't help you there.

Since it's a visual experience, I recommend watching the video fullscreen. I've seen a lot of comments from folks not wanting to install Silverlight to see if it's worth installing Silverlight. Fair enough, I'm hosting the video at Viddler, using a Flash based player.

In a nutshell, the site allows you to smoothly zoom from a wide angle display to an extreme closeup on items such as Bo Diddley's guitar.

Capture Capture

Haven't I seen this before? Google Maps, Zoomify, Zoomarama, etc?

The reactions to this have fallen into two groups. Some folks say it's incredible, and some say they were impressed when they saw it in 2005, was called Google Maps (and zoomed all the way from outer space to their house). The unimpressed folks point out that there are other Flash applications that handle this, too, like Zoomify and Zoomarama. Haven't we seen this before?

For example, when TechCrunch called the Hard Rock demo the Coolest Bit of MIX Keynote One, commenters were quick with the "Yawn, seen it before" talk. A few days later, Lee at The Flash Blog showed off a collection of DEA photos on Zoomarama, saying that it illustrated how Flash can do the same thing.

cm

Yes and no. There are a few important differences.

Native support

While Flash (and even AJAX - more on that later) have been capable of delivering large images via progressive downloads for a while, neither have supported it natively. You had to install additional server software, write a lot of custom code, and / or give up a lot of control over your application. For example, a free service like Zoomorama is really cool way to show off your own photos, but it’s an advertising supported service which limits you to 150 mb per album. They store your photos for 90 days (renewable up to 6 months), then they delete them. None of that would work for a site like Hard Rock, which serves up over 4 GB of images in a custom interface, and probably plans to be online for longer than 6 months.

Zoomify is a more appropriate comparison for professional use, but it costs $795 per server. By comparison, Deep Zoom is built into the Silverlight plugin. You’re free to host your photos where you’d like, without restrictions on ad support or licensing requirements. So you could build and host a Silverlight / Deep Zoom site like Hard Rock without paying a single cent to anyone, including Microsoft. There's no reason that you couldn't host a Deep Zoom site on Linux / Apache (and could view the site on Linux, Mac, and of course Windows).

Customization

The fact that Deep Zoom is built in as a native Silverlight element - a primitive, like an image or a textbox) means that you have full control over how it works, including user interface composition, interaction, and programmatic integration. The Zoomify viewer can be customized, but from what I've read in the FAQ's it looks a lot more complex than working with the Deep Zoom MultiScaleImage. There are also some limits to what you can customize with Zoomify - I'm guessing that with enough work you could get it to look and act how you wanted, but I'm just about certain that it would require a lot more work than an equivalent experience would take in Silverlight.

Deep Zoom compared to Google Maps API

Taking a step back, there's nothing magic about the RIA approach to browsing these big images. Whether you're you're using Flash, Silverlight, or AJAX to request the appropriate image information from the server and make the transitions between images look good, it's valid to point out that the Google Maps AJAX approach has been doing a pretty good job with this for a few years now.

For instance, take a look at the xRex sample viewer. They're using the Google Maps API (JavaScript) to display their collection of high resolution images, such as this one Chicago. Here, I'm zooming from a city-wide zoom to display individuals; if you look at the zoomed image full size you can read license plates and street signs.

 xRez - Chicago - Wide Angle xRez - Chicago - Zoomed

Google Maps uses a QuadTree to store a pyramid of images at different resolutions. As long as you've got your images chopped up correctly, the Google Maps API (a.k.a. Javascript include) handles requesting the appropriate image files to display the current view, and transitions smoothly (well, kind of smoothly) between zoom levels. It's easy to see what's going on by running the Firebug network monitor while zooming in.

xRez - Chicago - Firebug

Firebug doesn't pick up the individual image requests from Silverlight Deep Zoom. I initially jumped to the wrong conclusion, as others have: I guessed that Deep Zoom was using a wavelet based image format (like JPEG 2000 or HD Photo). That would make sense, since Photosynth apparently used HD Photo. After a bunch of work to write a comparison of HD Photo and JPEG, I suspected Firebug was misleading me. First of all, I knew that the source files on the server were simple JPEG's. Secondly, since Silverlight is server agnostic there couldn't be any server side magic going on. Sure enough, Fiddler shows that browsing the Hard Rock Memorabilia collection does the same thing:

Deep Zoom - Traffic in Fiddler

So, on that point, we've got a draw.

To recap: Flash ZUI (zoomable UI) components are workable but have drawbacks. An AJAX ZUI approach, like Google Maps, seems to do the same thing under the hood that everyone's doing - pulling JPEG tiles from the server on demand. So, how is Deep Zoom better than AJAX?

Collection Support

The Hard Rock Memorabilia site also has support for collections. Look at the screenshot below and take a look at the navigation area on the left. Those collection navigation links let you filter the view by artist, subject type (for instance, instruments), decade, genre, and location. The Google Maps system is browsing over one large image, and you really only have control over zooming and panning. By contrast, Deep Zoom is smoothly panning and zooming through collections of large images (at different resolutions) which can be dynamically rearranged by user action.

Hard Rock Collections

Software Support

Here's one more big difference - the tooling for Deep Zoom is really nice. Last night I downloaded the Deep Zoom Composer (free) and built a collection in a few minutes. The longest part of the the process was digging around for some images, deciding that my photos could be better organized, and then just deciding to use the sample photos that come with Vista. Other than that, it was just import, position, and export - it took about five minutes. Here's the compose screen.

Deep Zoom Composer

As I was mentioned before, collections can include multiple images of widely different resolutions, overlapping or aligned however I choose. For instance, I could have shrunk all the other images and hidden them as Easter Eggs in the tree; you'd only notice them when you zoomed in, but could zoom to the full resolution on the embedded images.

Next, I export the images:

Deep Zoom Export

That creates a folder tree holding JPG images at different resolutions, which are referenced via the info.bin index file.

Deep Zoom FolderDeep Zoom Image Tiles

I found some applications out there which will slice up photos for use by the Google Maps API, like the Google Maps Image Cutter and GMap Uploader (not suitable for large photos, as it's a web based tool). They'd probably do a fine job of cutting up a single image, but since the Google Maps API doesn't support collections, these don't either. And while I'm a big fan of community software, I'd rather have a free, supported image slicing application provided by the same company that's building the image zooming framework.

The Legal Question

The Google Maps API Terms of Service states:

For individual users, Google Maps, including local search results, maps, and photographic imagery, is made available for your personal, non-commercial use only. For business users, Google Maps is made available for your internal use only and may not be commercially redistributed, except that map data may be accessed and displayed by using the Google Maps API pursuant to the API terms and conditions.

Additionally, while Google Maps is currently a free service which currently does not contain ads, Google states in their terms of use that they reserve the right to display ads in the future.

So, what does that mean? It seems that those terms would prevent me from using the API for a public site for business use, and that would mean that I couldn't build a commercial site like Hard Rock Memorabilia with the GMaps API. It's fuzzy, because the Google Maps API TOS probably have mapping in mind, and I wouldn't expect that Google would sue Hard Rock over their use of the JavaScript... but they could. I'm not trying to spread FUD, I'm just saying that as a business user I'd have some degree of concern that the GMaps API isn't really a "redistributable" API.

In contrast, the Silverlight plugin is freely redistributable, so there's no licensing concern there.

I see how this works, I could totally code it myself

Some people have looked at Deep Zoom and said, "Oh, they're just downloading image tiles on demand. There's nothing hard about that, I could totally build that..." Yeah. I've made that mistake before. Understanding the technologies a system uses does not mean that it's trivial to build or maintain your own version. This is hard stuff, and there's a very low payoff in becoming an expert here when there are free, tested solutions out there. But, you know, knock yourself out, and be sure to let us know how it went for you by leaving a comment below.

Disclaimer: I work for Vertigo, the company that built the Hard Rock Memorabilia site. I didn't work on the project.

Published Friday, March 21, 2008 4:17 PM by Jon Galloway
Filed under:

Comments

# re: Why Silverlight 2 Deep Zoom Really is Something New

Impressed with your work, but not impressed with your findings. Just because SL can do it natively is a rather weak argument IMO as long as you can do the same with Flash with some work. The kind of argument I'm looking for is this: 1) faster than Flash, 2) uses less resources than Flash (extremely important when placed in the browser and the user has N windows open), 3) easier to build, 4) faster to program. Except #4 SL is behind. IMO the #1 priority for the SL team should be performance. You can have all the bells and whistles you want, if it's slow people will go for Flash. I understand it's a beta, and this is why I'm not yet ruling it out. I hope MS learned the Vista lesson: It's the performance stupid! :)

Saturday, March 22, 2008 11:15 AM by Peter

# re: Why Silverlight 2 Deep Zoom Really is Something New

@Peter

(1) I've found that the performance of Silverlight, and Deep Zoom in particular, is very competitive. For instance, the Hard Rock Memorabilia site performed much better than any of the Zoomify / Zoomarama sample sites I looked at. However, the difference may be in the hosting, since the main component of performance in this kind of system is the network traffic.

(2) I agree that resource usage is important. Can you point me to some information which shows that Silverlight is less efficient with resources than Flash?

(3) I don't understand why you said that Silverlight is behind here, especially with Deep Zoom. Scott Hanselman's walkthrough (www.hanselman.com/.../DeepZoomSeadragonSilverlight2MultiScaleImagesAtMix.aspx) is incredibly simple - build your image collection, export it, and add a single MultiScaleImage tag to your XAML:

<MultiScaleImage x:Name="deepZoomObject" Source="foo/info.bin"/>

Plus, Visual Studio and C# is miles ahead of the Flash and Action Script. Isn't easier to build pretty similar to faster to program.

You left one obvious one out - Flash is everywhere, and Silverlight is just getting started. From a reach point of view, Flash is worth the extra work if you're concerned that your users don't have Silverlight and won't install it. You'd be surprised how many hits the Hard Rock site has had, though, so it's obviously not an insurmountable obstacle.

Saturday, March 22, 2008 12:30 PM by Jon Galloway

# re: Why Silverlight 2 Deep Zoom Really is Something New

1) How exactly did you measure that? Here's what I did: I went to the site you pointed (this is on P4 at 3.2GHz, slower than my desktop but decent), and after installing (no complaints there) and zooming a bit I started moving around, but just a little bit (maybe 100px or so, barely pinching it). My CPU was running at 80-90%. I don't know about you but that's not "competitive" in my book. So I went to Google Maps and zoomed in with satellite view and did the same thing. My CPU did not get above 15%. If SL is 6 times slower than something I can achieve with JavaScript then we're in trouble.

2) CPU is a resource, haven't looked at RAM yet (need to find something to compare it with). I went over to the demo site for the new controls in SL2. Just moving the slider left and right, just the UI took my CPU from 0% to 10%. I did the same thing with the native Windows slider for the volume control and I couldn't get the CPU above 4% (and this one actually did something in the background as I moved the slider).

Here's another example: go to any SL video that can do full screen, start the task manager first (move it to a different monitor if you have one) switch to full screen and watch the CPU (or wait a few second and close the video to see the task manager). On a simple movie while in the browser the CPU stayed around 15%-20% (not too bad), as soon as I went full screen it was getting close to 100%!

3) OK, probably I should have included this in the list as well. I don't have extensive experience with SL so I'll take your word for it. I meant those 4 points to be like a checklist rather than something SL is lacking.

Peter

P.S. I believe the fair comparison is with Flex not Flash. For the record I'm not pro Adobe or anti Microsoft, I actually use Microsoft products every day. However, I prefer to critique them with the hope they'll get better than praise them and ignore the shortcomings. I'd be happy to be proven wrong :)

Saturday, March 22, 2008 9:19 PM by Peter

# re: Why Silverlight 2 Deep Zoom Really is Something New

Correction on #3: "probably I should NOT have included this in the list"

Sunday, March 23, 2008 10:10 AM by Peter

# re: Why Silverlight 2 Deep Zoom Really is Something New

Let me see if I've got this right.  DeepZoom, built into Silverlight, is better than something like Zoomify, not built into Flash, because Silverlight automatically creates the JPEG tiles on the server?  If there was something similar to the single MultiScaleImage tag in Flash, they would essentially be equivalent, right?  In both cases, the applet would then just be pulling JPEG tile derivatives off the server...

Monday, March 31, 2008 1:57 PM by Peter Murray

# re: Why Silverlight 2 Deep Zoom Really is Something New

@Peter Murray

Sort of right. At the HTTP level, my understanding is that there's very little difference between Zoomify and Silverlight Deep Zoom. From what I understand, the actual tiles on the server for all of these technologies are sliced up JPEG's, so there's little difference there.

I listed two separate benefits to the fact that Deep Zoom is part of Silverlight, and you've kind of mashed them together.

First of all, on the server: There's a supported toolset for creating the tiles, and that toolset is released by the same company that creates the viewer (Silverlight).

Secondly, in the browser: There's a native element (MultiScaleImage) that's baked in to Silverlight. It's not an addon, it's built in to the rendering system. This also affects the development phase, because a MultiScaleImage is a first class citizen in the Silverlight toolkit, the same as a button or a textbox.

Tuesday, April 1, 2008 2:21 PM by Jon Galloway

# re: Why Silverlight 2 Deep Zoom Really is Something New

one thing you didn't really mention here... that the team used to great effect on the Hard Rock site... is dynamic collections. The layouts you see are not fixed, they can be adjusted to fit in new images, or reflowed to remove redundant ones. They don't need to be on a fixed grid, or even displayed in a rectangle if that doesn't suit the application.

Deep Zoom also supports a concept called Sparse Images which allows these collections to be embedded inside each other - providing an almost fractal zooming and navigation experience ...

and all of this with no loss of performance.

Sure, grabbing the 100mp+ Bo Diddley guitar from Hard Rock causes some CPU cycles (and it does run a bit slower on the Mac) but we're looking at Beta1 of a technology that's probably got a couple of revs before it's baked and finished...

Great write-up. thanks :)

Wednesday, April 9, 2008 11:47 PM by Offbeatmammal

# re: Why Silverlight 2 Deep Zoom Really is Something New

I'd like to see someone make the Hard Rock site completely in Flash. And do it for the same budget. I'm sure someone out there could do it, but it wouldn't be nearly as smooth and it would've cost a lot more money.

Just my two cents.

And there's no way someone can tell me the Silverlight deep zoom sucks compared to Zoomify/Zoomarama. You've got to be kidding me. Do people really enjoy zooming into an image and seeing giant pixelated blocks fill their screen, then wait 4-10 seconds for a full-res image to load? No.

Sunday, April 13, 2008 11:13 PM by Nicholas

# re: Why Silverlight 2 Deep Zoom Really is Something New

It works really bad on my mac. both CPU-cores at 140%.

Friday, May 16, 2008 4:19 PM by Remco

# re: Why Silverlight 2 Deep Zoom Really is Something New

@remco - It overclocks both cores to 140%? That's pretty awesome. Normally that requires bios configuration.

Saturday, June 7, 2008 5:43 PM by Jon Galloway

# re: Why Silverlight 2 Deep Zoom Really is Something New

Hi Jon,

We've just updated the Hard Rock Memorabilia site for the second time since Silverlight 2 Beta 2 went live. I think this latest build addresses many of the concerns regarding Deep Zoom and general performance of Silverlight raised in these comments.

When the memo site first went live back in March on Beta 1 bits there was such a scramble to build it in time for MIX '08 that we barely had time to optimize. In this latest build, the layout/filter/sort animations are far more streamlined (and nicer looking too!). Performance on the Mac is now up to par with PC and no longer does your CPU seem to cry out in pain. It leaves a pretty small footprint now.

-Will

Thursday, July 10, 2008 8:11 AM by Will

# re: Why Silverlight 2 Deep Zoom Really is Something New

i don't understand why people are so crazy about the deep zoom thing. Its just zoomify, or the java neuroinfo, with some funky blurring, and a rubber band effect added.

no-one ever does it because its horribly inefficient.

Monday, September 15, 2008 10:22 AM by noj

# re: Why Silverlight 2 Deep Zoom Really is Something New

@noj - Other than Google Maps, right? Nobody does tile serving to allow navigation of large imagery except for Google Maps and a few other major sites, because it's really inefficient. I'm sure that's what you meant.

Tuesday, September 16, 2008 3:41 AM by Jon Galloway

# re: Why Silverlight 2 Deep Zoom Really is Something New

I still don't really see how this is better than flash. You can really do it all there. I mean, yeah... DeepZoom is pretty cool, but couldn't you code something that does just the same with preloaders in between in flash? :S

Sunday, December 28, 2008 6:05 AM by Silverlight

# re: Why Silverlight 2 Deep Zoom Really is Something New

to buy nolvadex in internet jcb Vermont

Thursday, August 26, 2010 1:34 PM by nolvadex

# re: Why Silverlight 2 Deep Zoom Really is Something New

donepezil online shop fast mexico

Thursday, August 26, 2010 1:34 PM by donepezil

# re: Why Silverlight 2 Deep Zoom Really is Something New

chloroquine Florida

Thursday, August 26, 2010 1:34 PM by chloroquine

# re: Why Silverlight 2 Deep Zoom Really is Something New

low price actos rx fast delivery Kentucky

Thursday, August 26, 2010 1:34 PM by purchase

# re: Why Silverlight 2 Deep Zoom Really is Something New

cartia cd tablet no script South Dakota

Thursday, August 26, 2010 1:34 PM by cartia

# re: Why Silverlight 2 Deep Zoom Really is Something New

where to buy seroquel coupon cod accepted portugal

Thursday, August 26, 2010 1:34 PM by order

# re: Why Silverlight 2 Deep Zoom Really is Something New

abuse of provera online tablets no script

Thursday, August 26, 2010 1:34 PM by provera

# re: Why Silverlight 2 Deep Zoom Really is Something New

buy brand ritonavir moneygram no script New York

Thursday, August 26, 2010 1:34 PM by price

# re: Why Silverlight 2 Deep Zoom Really is Something New

how to buy amantadine in internet check saturday shipping Oregon

Thursday, August 26, 2010 1:34 PM by purchase

# re: Why Silverlight 2 Deep Zoom Really is Something New

how to buy bupropion tab no rx

Thursday, August 26, 2010 1:34 PM by abuse

# re: Why Silverlight 2 Deep Zoom Really is Something New

composed by hsm 2012-06-04

Tuesday, June 5, 2012 3:29 AM by Beetafriele

# re: Why Silverlight 2 Deep Zoom Really is Something New

GJTRSDGSADSDAFHSAD  GJTRSDGSADSDAFHSAD

YUKYZSDGASDDFHAD FGBNFADFHGDAFSDGASD

FGBNFSDGSADGXZCBZX SDGSDSDGSADASDFHGAD

YUKYADFGASDGSDGASD YUYSDGSADASDGHASD

Wednesday, September 5, 2012 7:58 PM by GafeWrofe

# re: Why Silverlight 2 Deep Zoom Really is Something New

YUYSDGSADASDGHASD  ASFDADFHGDAFDSFGHADS

ASFDSDGSADADSFHGADFS  DSGAZSDGASDADFHGAD

FGBNFZSDGASDXZCBZX  GJTRSDGSADSDAFHSAD

YUKYSDGSADSDFH  YUKYADFHGDAFSDFH

Thursday, September 6, 2012 7:02 AM by Absordreibe

# re: Why Silverlight 2 Deep Zoom Really is Something New

ADFHGASDGASDADSFHGADFS  QWERSDGSADSDAFHSAD

ASFDSDGSADADFHGAD  QWERADFGASDGASDFHGAD

ERYERADFHGDAFSDAFHSAD  QWERADFGASDGDFHAD

ASFDSDGSADSDAFHSAD  ADFHGASDGASDASDGHASD

Thursday, September 6, 2012 11:54 AM by Zesemensush

# re: Why Silverlight 2 Deep Zoom Really is Something New

Horoscope perras 2011 horoscope egyptien gratuit

Thursday, May 9, 2013 8:33 AM by Stapleton

# re: Why Silverlight 2 Deep Zoom Really is Something New

Les cartes divinatoires comment savoir son signe astrologique

Saturday, May 18, 2013 4:04 PM by Keith

# re: Why Silverlight 2 Deep Zoom Really is Something New

El tarot scorpion astrologie du jour

Saturday, May 18, 2013 8:02 PM by Cave

# re: Why Silverlight 2 Deep Zoom Really is Something New

Astrologie amour voyance gratuite travail

Monday, May 20, 2013 12:53 PM by Runyan