How will we view and publish images
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.
on the web in five years?
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
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
Photo Sharing: Flickr
The solution for publishing high-resolution images on the web I set out to develop had to have the following qualities:
- 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.
- 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.
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.
- 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)
- 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.
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?
- Multiple replacements of images cause performance problem related to Flash Player plugin instantiation.
- Images sometimes fail to load due to plugin activation issues.
Let me quickly guide you through the basic process of publishing a high-resolution image on your web page:
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])
Reference jQuery library, e.g. using Google’s CDN and the OpenZoom Endo script in your HTML page:
Place the OpenZoom Nano viewer SWF (
OpenZoomViewer.swf) file into the same directory as your page.
Add the image to your HTML page and annotate it with the special
<img src="awesome/awesome-600x320.jpg" width="600" height="320" openzoom:source="awesome/image.xml"/>
Enjoy hassle-free high-resolution imagery on the web!
Download & Source
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!