Zooming

I've always wondered how we will interact with images on the web in the future. Being a photographer myself, I've always thought it was a pity that we go from 10–15MP to less than 1MP when we publish our photos on the web. Therefore, I've decided to do something about it. I've come up with a solution that can coexist with existing content, is easy to use, and degrades gracefully for people not meeting the technical requirements. Basically, you convert your high-resolution images into an appropriate format, e.g. the Deep Zoom Image format, publish it along side your original image and annotate your tags with an attribute that points to the multiscale version of your image. Upon loading of the page, a script replaces all annotated images with multiscale image viewer. If a user doesn't have JavaScript enabled or doesn't support the viewer, the original image simply appears as it used to do. Last night, I've put together an article on my blog which includes some sample scenarios for you to explore: http://gasi.ch/blog/inline-multiscale-image-replacement/ The work I've started is by no means perfect or finished. Therefore, I'd like to invite you to discuss your vision of the future of images on the web! Together we can then collaborate on something that simply better than we already have… Regards, Daniel

I think it's brilliant how you've tied it all together. Critiques: - One problem with the image replacement is that you start with a sharp (but non-zoomable) image, and then it goes black and then fades in again. Ideally the transition from non-zoomable to zoomable would be seamless. Of course, in addition to that, you'd want an indicator on the image that while it isn't zoomable yet it will be zoomable soon. - While you do have a complete pipeline, some of the steps are still pretty technical. Ideally you'd be able to just upload a full-res image and the server would take care of pre-processing it.

Good points. I am still getting acquainted with JavaScript development. Do you have any idea on how to approach the replacement process so it's less noticeable, or at least that the container where it takes place doesn't collapse? Right now, I am using the jQuery library to perform the replacement and the entire process happens after the DOM has been rendered. Do you know if and how we can replace the annotated images earlier? I am also aware that the pipeline is far too technical at this point. To solve this issue I have a couple of ideas, two of them being developing a WordPress plugin that would automate the process for many bloggers, considering the popularity of the platform. The other one is already work in progress: A desktop tool with a GUI for converting images into pyramids. It would run on Windows and it would allow people to batch process images and output them with a sample page that has the necessary annotations. Right now, I am working on this using Boo on .NET, taking advantage of the DeepZoomTools.dll. Do you have any information regarding the licensing of the DLL? Any other ideas on how to make the whole process simpler? On a side note, I considered adding the source image metadata (for viewing and download) right into DZI. Would like to think about this together? This way we could also make this work with Seadragon Ajax.

Daniel, I think we at Lila.io may have an alternative solution for you to present and publish your photos. At Lila.io (www.beta.lila.io) we've built a zoomable publishing platform based on an infinite canvas, where you can layout all your content as if you were working in InDesign. A core part of our system is that we work with multiple resolution images (scaled on server side when uploading) , which give the viewer a fluid experience despite browsing through hundreds 100Mb images. Example Space: http://beta.lila.io/#view/lilaspaces/c7c3072d-8f01-4dfd-9b5d-dd62d7ad0efd/d6e30443-2f72-4a2c-a3da-14dcb6af54bd?scene=00%20Poster Further we're close to only showing all vector graphics (text, drawings and images) as bit maps when zoomed too far out to make any sense of the content. This reduces the CPU load by magnitude. Cheers

Henryk, Thanks for your answer. However, what your offering is not quite what I want to achieve. If I turn off JavaScript or Flash I can't see anything. Have you read my original blog post? There I describe some of the properties I want to achieve: http://gasi.ch/blog/inline-multiscale-image-replacement/ Regards, Daniel

Daniel, I've asked Aseem if he might weigh in on the JavaScript question. One thought that comes to mind is you might create the OpenZoom object off screen at first, and move it in to position only once it's loaded sufficiently. We are working on publishing an explicit license for DeepZoomTools.dll, and I expect it to be pretty permissive; we want people to build stuff with it. Shall we start another thread for the DZI meta-data discussion?