Add High Resolution Images to your Web Site using Microsoft’s www.seadragon.com web site

One of the most frustrating experiences I have as a consumer of b2b or b2c web sites is the lack of high-resolution images to let me see what I’m buying in detail.

Since even inexpensive consumer digital cameras are now producing images over 10 megapixes, it’s not unreasonable for people to expect to see that kind of detail when they browse images online. That’s especially true when they’re shopping for new items to purchase.

The reason web developers don’t put high resolution images on their web sites is obvious: they want the site to perform quickly. As a visitor to the site, you expect it to load quickly – but you also want the high resolution images.

Enter Microsoft Live Lab’s Seadragon.com project. The Seadragon web site allows you to take any high-resolution image that you place online, and creates a special zoom-able version of that image that you can subsequently embed in any web page.

For example, a few minutes ago, I took this high-resolution digital image of a Motorola Bluetooth Headset, placed it on an externally visible web site, then went to the Microsoft SeaDragon web site http://www.seadragon.com/create to create a zoom-able image.

I simply entered the URL to my image, then clicked the Create button. Within a few seconds, the site had generated the high-resolution zoom-able image:

What’s amazing about this, is that they also include an embed HTML code, that when placed in your web page simply makes the control available.

I had intended to embed the script in this Live, however ironically, Microsoft’s own Windows Live site doesn’t support embedding these new tags yet. <script src="http://seadragon.com/embed/k8b.js?width=auto&height=400px"></script>

Users of Blue Link’s b2b e-commerce application: Web.Venture can then take this link and embed it in with the product description to create a page that finally gives customers the high-resolution images they want — without slowing down your site!

Here’s how you add the information in Blue Link Elite and Web.Venture:

Open the Inventory Screen – Web.Venture tab
Add a language-specific Web Description

Note that since HTML tags are allowed, you can pasted the Embed code that you obtained from the Microsoft Site here, along with any other text you want to have appear with the image.