Zoomable High-Resolution Photos

Say goodbye to "click-to-enlarge"

+ Great for sharing high-res imagery

+ Interactive zooming and panning

+ Fast and smooth experience

Zoomit Tutorial
Watch How-to Video

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.

Scenario Example
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.]

Detailed Diagrams

1937 Chicago Tunnel Terminal Company Map (93 megapixels)

Art Works

The Garden of Earthly Delights, Hieronymus Bosch (34 megapixels)

Panoramas

Grand Coulee Dam Panorama (173 megapixels)

Historic Archives

USA Declaration of Independence (69 megapixels)

How-to Guide

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.

Zoom.it (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

The Zoom.it 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. Zoom.it will automatically figure out the largest size and provide an attribution link using your Flickr username. (Click here to see an example)

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 Create button.

Example

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

Copy the viewer embed code and paste it into your page.

Example

The code can be embedded into any HTML page that supports JavaScript.

If you're using Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, or ScrewTurn Wiki, you can get more detailed instructions and how-to videos by visiting the Code Snippet Embedding Tutorial.

If you're using Drupal, be sure to check out this Drupal module which automates the process of getting the embed code during authoring.

Beyond the basics

At a high level, here's how the process works:

  1. 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.
  2. 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.
  3. 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 Single Images 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 Zoom.it API.

If you want to go beyond what the Zoom.it service 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

Did you know that the most popular Web applications - like Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, and ScrewTurn Wiki – all run great on the Microsoft Web Platform?

Companies of all sizes are running their web infrastructure on the Microsoft platform because it’s cost efficient and provides the best ROI (see customer stories here).

Check out the Windows Web App Gallery, where you’ll be able to install, deploy, and customize these applications on the Windows Platform with just a few clicks.

Links to other resources