Here's an alternative to click-to-enlarge that elimates the long load times normally associated with high resolution photos. And, it enables users to smoothly zoom & pan around the photo, or even take it full-page.
Photo: California Sea Lions at Pier 39 (11.19MB, 15 megapixels)
High-resolution photos let users appreciate the details, and a zoomable experience invites them to explore it. Try out the experience in the examples below,
and see for yourself.
[Hint: click or use the mouse wheel to zoom, drag to pan. Be sure to try viewing it full page - just hover over the image and click the toggle button at the bottom right of the viewer.]
This tutorial shows you how to use the Microsoft Live Labs Zoom.it service to provide a zoomable interactive experience for viewing
a single high-resolution photo on a Web page or a blog.
(previously known as Seadragon.com) is a free service from
Microsoft Live Labs that uses
Deep Zoom image technology to
tile and serve large images through an interactive zoomable
viewer. The service converts your image to the Deep Zoom format, which lets you smoothly and efficiently explore the whole image, no matter how large. Zoom.it runs on
Windows Azure and enhances the experience with
Microsoft Silverlight, when available. (To learn more about Deep Zoom technology, watch the video on the Microsoft Silverlight Deep Zoom page).
Click on each of the steps below for step-by-step instructions.
Step 1 - Copy the link to a photo you've uploaded to the web
service requires a public Internet-accessible link
to an image. You'll need to first publish your photo
somewhere on the Web (like a photo sharing service). [Note that some
photo sharing services downsize images on upload.]
If you're photo is published to Flickr, all you
have to do is copy the URL of the photo page.
automatically figure out the largest size and
provide an attribution link using your Flickr
here to see an
The service also works with PDF and SVG files.
Step 2 - Enter the link on the Zoom.it site
Go to the Zoom.it
site. Paste the link to your photo in the text box and click the
You'll see your image displayed in the viewer once the service has finished generating the Deep Zoom image files.
Depending on the size of your image, it could take a few minutes to complete.
Step 3 - Embed the viewer on your web page
Beyond the basics
At a high level, here's how the process works:
- Original high-resolution image. You provide the
Zoom.it service with a link to an image on the Web.
The link must be publically accessible on the
Internet, and the Zoom.it viewer will provide a link
back to the original image.
- Deep Zoom image file generation, storage,
and serving. The Zoom.it service generates a Deep Zoom image. Basically, this consists of multiple versions of the image at different resolutions, each broken down into a set of image tiles that can be delivered individually. The Deep Zoom files are stored
by the Zoom.it service and later served as needed.
- Deep Zoom image viewing and rendering. The
Zoom.it service generates some
script code for you to embed a viewer on your Web page. The
Zoom.it viewer provides an experience that lets users zoom and pan around within the image.
The rendering process, as with all Deep Zoom
experiences, initially loads a low resolution version of
the image, and higher resolutions are
blended in as image tiles are downloaded in the
background. (If you're interested in the technical details, check out the
section in the
Deep Zoom File Format Overview).
To automate the operations available on
the Zoom.it site (like entering a URL and getting the
embed code), programmatic access to the Zoom.it service
and the underlying Deep Zoom image
is available via the
If you want to go beyond what the
provides (like changing the user experience, limiting
access to the original high-resolution image, or
generating/storing/serving the tiles yourself), you
can use Deep Zoom tools and
technologies to build a similar solution yourself:
Run your apps on the Microsoft Web Platform
Links to other resources