My Tech Notes

Following a question asked by a friend, I did a small research on the subject of using modern browsers capabilities to implement "photo zoom" feature, that is, make a "photo gallery" which allows visitors to "zoom in" into a picture to see specific areas of interest while not loading the whole image (potentially huge) in advance.

On a basic level, there are three relatively straightforward ways to do that.

(Let me say here right away that the fourth way, which might be better than all three, is to use Adobe Flash, but as far as I could tell there is no readily and freely available "player" which can do the job, thus one has to resort to either evaluating some commercial products or writing relevant code himself. At any rate, I didn't have neither time or inclination to research this any further)

1. Google Map API allows to use arbitrary images instead of actual maps, and it could be used to achieve desired effect. One commercial site using this approach is iFloor (just click on any image which has "click to zoom" markup and enjoy Google Map UI), and here author of this implementation posted complete instructions and all relevant source code (under open license), along with another "demo" of this technology in action.
   
   I shall speak in more details on this approach later, let's just say for now that while it is not without its shortcomings, it is easy to use, portable and flexible.
   
   
2. Unlike Adobe, Microsoft decided to include in the latest release of its Silverlight browser plugin a special feature which they call "Deep Zoom", intended very specifically for this very purpose: web-based presentation of large images with "on demand" loading of detailed view on "zoom in" requests. An extremely nice showcase of this technology can be seen here.
   
   There are two ways you cal play with it:
   
   (a) Download special application "Deep Zoom Composer" (proprietary, but free to download and use) and follow tutorial.
   Unfortunately, no matter how hard I tried I could not make it work: following any attempt to load an image, after processing it for a while application always reported that this was not a valid image; therefore, I had to give up on this approach;
   
   (b) Alternatively, one can use free experimental site by Microsoft Labs to upload your images (you can upload many images in one operation) for similar on-line processing. Then, you can include presentation into your own web site using IFRAME.
   Again, this all sounds good in theory, but in reality I could hardly make it work. About half of my images refused to be processed for unknown reason, and remaining few that I did upload demonstrated strange behaviors, such as view suddenly "darkening" (sometimes going totally black) on some intermediate zoom levels, etc.
   
   Conclusion: like many other things from Microsoft, this looks promising and demo looks fantastic but implementation sucks big time, and since this is based entirely on proprietary technology I am powerless to do anything about that :(
    
3. Finally, the third option is really a variation of option number two. It would appear that the whole "Deep Zoom" technology came from an acquisition of software called "SeaDragon", which was not using any browser plugins but rather relied only on JavaScript, therefore providing a portable alternative to "Deep Zoom"-based solutions.
   
   Since this technology is now owned by Microsoft, there is an easy integration between SeaDragon and "Deep Zoom", so whether you published your work in photozoom.mslivelabs.com or used Deep Zoom Composer, you can re-use your results with SeaDragon following these simple instructions.
   
   The result might not look as nice and smooth as Silverlight-based solution (price to be paid for better portability), but it is basically the same thing underneath and so it shares all of its shortcomings as explained above.

So, that's it. As it is equally evident in many other situations, solution from Microsoft is nice when it works, but completely proprietary and basically useless (in my case, anyway), while Google approach, not perfect as it is, and perhaps not looking as "professional", is much more open (though not technically speaking an "open source" one) and much easier to tweak to do something close to what you want.

In the next post I'll provide more details on my experience with implementing "PhotoZoom" with Google map API.

# posted by Kostya @ 7:20 PM