How will we view and publish images
on the web in five years? Today I’d like to share with you my vision of how we could improve the publication and viewing of high-resolution images on the web. Before discussing what this vision entails, I’d really like you to explore it yourself.

Scenarios

The following are three real-world scenarios for publishing high-resolution images on the web: news, blogs and photo sharing. Explore any one or all of these scenarios and interact with the images within. Come on, let’s get your mouse wheel spinnin’! :)

News: The New York Times

View Demo | View Original Page

Disclaimer: Since a high-resolution version of the original image was not available to me, I replaced it with another one from the Department of Defense which was taken in the same region, called Zabul Province.

Blogs: Information Architects

View Demo | View Original Page

Photo Sharing: Flickr

View Demo | View Original Page

Disclaimer: Due to conflicts, the original JavaScript that was included in the page was removed for this demo.

Vision

The solution for publishing high-resolution images on the web I set out to develop had to have the following qualities:

For Users

• The user shall not pay, in terms of time or bandwidth, for large images she's not interested in.
• The solution shall degrade gracefully, e.g. fall back to status quo, for users that do not meet the technical requirements.
• The solution shall offer a vastly enhanced experience for viewing high-resolution images on the web, including full screen support while retaining as many of the standard interactions with images as possible.
• The user shall not be taken out of the context she was working in.

For Publishers

• The solution shall offer simple publishing of high-resolution images and turn their exploration into an awesome experience!
• The solution shall be as much backwards- & forwards-compatible as possible.

Solution

The solution I developed, based on something I started to call Inline Multiscale Image Replacement, is a combination of three different technologies from the OpenZoom project, together known as OpenZoom Endo:

• OpenZoom Caral: A Python tool to batch convert images into a multiscale image format based on the OpenZoom Description Format and Microsoft Deep Zoom.
• OpenZoom Nano: A light-weight multiscale image viewer running in the Adobe Flash Player and built with the OpenZoom SDK.
• OpenZoom Endo: A script performing progressive enhancement on new and existing HTML pages. It is written in JavaScript and packaged as jQuery plugin.

Features

• Simple publishing of high-resolution images on the web, even on existing pages.
• Continue to use interactions your already familiar with such as Save Image As and View Image. (Screenshot)
• Progressively enhance your browsing experience, with graceful fallback for those of you with browsers that are not JavaScript or Flash enabled.
• Never download more data than you currently look at.
• Take advantage of your entire screen real estate by using the full screen mode.
• Explore the full glory of high-resolution images without ever leaving their page.
• Publish images in different sizes from the same source image.
• Free! as in beer and freedom!
  Released under the GPLv3 open source license.

Known Issues

Of course, as with any fresh-out-of-the-oven technology there a couple of things that don’t work as intended. Here’s a list of known issues:

• Image replacement can be delayed by large pages, resulting in a visible page flicker.
• At this point, OpenZoom Endo does not pass the W3C validator due to the custom attribute (XHTML namespaces & custom DTDs, anyone?)
• Ideally, the viewer would initially feature some visual cues that convey the enhanced functionality. Add some simple controls to that. Designer, anyone?
• Script sometimes conflicts with existing JavaScript within the same page.
• Multiple replacements of images cause performance problem related to Flash Player plugin instantiation.
• Images sometimes fail to load due to plugin activation issues.

Walkabout

Let me quickly guide you through the basic process of publishing a high-resolution image on your web page:

1. First, use Python and the OpenZoom Caral library to convert your image into a multiscale image pyramid and optionally define additional sizes of your image you’d like to publish or offer for download:

   import openzoom
   
   creator = openzoom.ImageCreator()
   creator.create("awesome.jpg", "awesome", [0, 600, 1920])

2. Reference jQuery library, e.g. using Google’s CDN and the OpenZoom Endo script in your HTML page:

   <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
   <script type="text/javascript"
    src="openzoom-min.js"></script>
       

3. Place the OpenZoom Nano viewer SWF (OpenZoomViewer.swf) file into the same directory as your page.

4. Add the image to your HTML page and annotate it with the special openzoom:source attribute:

   <img src="awesome/awesome-600x320.jpg" width="600" height="320"
    openzoom:source="awesome/image.xml"/>

5. Enjoy hassle-free high-resolution imagery on the web!

Download & Source

• Download OpenZoom Endo (808kb) from Google Code.
• Have a look at the source code on the OpenZoom Google Code repository.

Epilogue

With this and my other work on the OpenZoom project, I want to explore new ways of interacting with visual information on the web. Join me and let’s explore how the future of browsers with the appropriate image formats that support high-definition images could look & feel like!