Seadragon

Date April 4, 2009

seadragon21I’ve been making a lot of panoramas lately, using Photoshop CS4’s panorama stitching feature (which works amazingly well, BTW).  The panoramas are quite huge, and show an immense amount of detail when zoomed in.  Unfortunately, you can’t tell when looking at an image that fits inside a web browser’s window.  The image might as well have been taken in one shot, rather than using multiple shots stitched together and wasting a bunch of time and disk space.  That is, until now.

Microsoft has developed software called Seadragon that allows seamless zooming of large images all in an embedded viewer on a web page.  Yes, they’ve actually managed to redeem themselves a little bit (to me at least) with this technology.

Seadragon allows me to post a huge panoramic photo and the viewers will be able to see the image as a whole, without having to download the huge file which can be many megabytes.  When they zoom in, Seadragon downloads the smaller, more detailed, images and seamlessly fades these into the zooming image.  It’s sort of like zooming in on Google Maps or Google Earth, but better, and with photos rather than maps.

Best of all, it’s free.  Here’s what you need to do to add a zoomable Seadragon image on your web page:

  1. Upload your image to Microsoft’s PhotoZoom site.  You may need to register and create an album for them first.
  2. Once your image has been uploaded and processed, view the individual image in the album and copy the Deep Zoom image file URL shown at the bottom of the image’s page.
  3. Next, go to the Seadragon embedded Ajax viewer website and paste the Deep Zoom image file URL into the space provided and click on the “Build Embed” button.
  4. The Seadragon servers will crunch your image and provide an output at the bottom of the page.  You can customize the width and height of the viewer if you like.
  5. When you’re satisfied with the viewer, copy the provided code snippet and paste it into your website/blog post.  Publish it, and you’re done!

Here are a few images that I’ve embedded into my photoblog (rawpixels.ca) that use Seadragon:

Irving’s Saint John Oil Refinery
Fishing Boats in St. Martins

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>